How to implement:

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

export default function Home() {
  return (
    <section
      className="flex flex-col items-center h-screen"
      style={{
        backgroundImage: `
        radial-gradient(circle at top, #26004d 45%,  #6b00d6 55%, #06000d 70%)`
      }}
    >
     
     {your page / component}
    </section>
  );
}

View background:

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.