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 Background() {
  return (
    <div className="bg-gray-50 text-black/50 dark:bg-black dark:text-white/50">
      <img className="absolute -left-20 top-0 max-w-[877px]" src="https://laravel.com/assets/img/welcome/background.svg" />   
        <div className="relative min-h-screen flex flex-col items-center justify-center selection:bg-[#FF2D20] selection:text-white">
   
        {your page / component}
        </div>
    </div>
  );
}

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.