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:

<section className="bg-white w-full  bg-center h-screen dark:bg-fuchsia-950 bg-[url('https://flowbite.s3.amazonaws.com/docs/jumbotron/hero-pattern.svg')] dark:bg-[url('https://flowbite.s3.amazonaws.com/docs/jumbotron/hero-pattern-dark.svg')]">
        {your page}
        <div className=" to-transparent dark:from-stone-950 w-full h-full absolute top-0 left-0 z-0"></div>
    </section>

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.