How to implement:

With tailwind installed in your project (tutorial), implement these tailwind classes in your parent div where it will reflect the background.

Code:

export default function Background() {
  return (
    <div className="flex flex-col items-center h-screen w-full">
      <div className="absolute top-0 z-[-2] h-screen w-screen rotate-180 transform 
      bg-white bg-[radial-gradient(60%_120%_at_50%_50%,hsla(0,0%,100%,0)_0,rgba(252,205,238,.8)_50%)]"></div>

        {yout page / component}
    </div>
  );
}

View background:

Responsive: Mobile and desktop:

Note

If this background has served you in any way, consider following me on github or supporting me to continue working at BacksEasy.