index.tsx
<section className="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 py-24">  
  <div className="max-w-6xl mx-auto px-12 py-8 rounded-2xl bg-white">
    <h2 className="text-gray-700 font-extrabold">100% Satisfaction Guarantee 
    & Money-Back Promise</h2>
    <h3 className="text-gray-700 text-2xl">
      I want the investment in this program to be an absolute no-brainer for you 
      - if you’re actually going to do the work 😉
    </h3>
    <hr></hr>
    <p className="text-gray-700">
      “Do the work” technically involves completing all the modules.
      <Link href="mailto:me@kulkarniankita.com" className="gradient-underline">
        drop me an email
      </Link>{' '}
      (within 30 days of purchasing the course) and I'll happily refund).
    </p>
  </div>
</section>;

Applies a Gradient Background using Tailwind

Adds the gradient background


bg-gradient-to-<r/l>: gradient to right or left


from-<color>: from gradient colour

via-<color>: via gradient colour

to-<color>: to gradient colour



max-w-6xl: Sets max width


mx-auto: centers the div


rounded-2xl: Creates rounded corners

You can apply a CSS class name as well