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-cover bg-center h-screen dark:bg-gray-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="bg-gradient-to-r dark:from-teal-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.

Any questions, criticisms or improvements, please suggest them through my Linkdin..