How to implement:

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

Download image here: Download ⭐
Resolution: (5824 × 3264)
Extension: .png

Code:

/public/abstract-shape-purple.png

export default function Home() {
  return (
    <section
      style={{
        backgroundImage: `url(abstract-shape-purple.png)`,
        backgroundSize: 'cover', 
        backgroundPosition: 'center',
        backgroundRepeat: 'no-repeat' 
      }}
      className="flex min-h-screen flex-col items-center justify-between p-24"
    >
      <div className="absolute top-0 left-0 w-full h-full bg-black opacity-50"></div>
      
      {your page / component}
    </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.