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.