Newsletter Subscription Form

<!--
  Day 21: Newsletter Subscription Form

  Created by John Champ

  Founder of Pixelcave      -> https://pixelcave.com
  Building Tailkit          -> https://tailkit.com
  Let's connect on X        -> https://x.com/pixelcave_john
                on Bluesky  -> https://bsky.app/profile/pixelcave-john.bsky.social
-->

<!-- Newsletter Form -->
<div
  class="relative mx-auto grid w-full max-w-3xl grid-cols-1 overflow-hidden rounded-lg bg-white shadow-sm ring-8 shadow-slate-500/10 ring-slate-900/5 md:grid-cols-2"
>
  <!-- Body -->
  <div class="flex grow items-center p-6 md:p-12">
    <div class="grow">
      <h3 class="text-xl font-extrabold">Templates in your inbox</h3>
      <p class="mt-3 text-sm leading-relaxed text-slate-600">
        Join <strong>100,000+</strong> subscribers and get the best free
        templates directly to your inbox every 2 weeks. Unsubscribe at any time.
      </p>
      <form class="mt-5 space-y-3">
        <input
          type="email"
          required
          class="w-full rounded-sm border border-slate-100 bg-slate-50 px-4 py-3 focus:border-slate-300 focus:ring-3 focus:ring-slate-100 focus:outline-hidden"
          placeholder="Enter your email.."
        />
        <button
          type="submit"
          class="w-full rounded-sm bg-pink-600 px-4 py-3 font-semibold text-white hover:bg-pink-700"
        >
          I want in
        </button>
        <p class="text-center">
          <a
            href="javascript:void(0)"
            class="text-xs font-medium text-slate-500 hover:text-slate-950"
            >No, thanks!</a
          >
        </p>
      </form>
    </div>
  </div>
  <!-- END Body -->

  <!-- Promo Image -->
  <img
    class="aspect-16/9 w-full object-cover md:aspect-square"
    src="https://images.unsplash.com/photo-1491975474562-1f4e30bc9468?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    alt="Promo Image"
  />
  <!-- END Promo Image -->
</div>
<!-- END Newsletter Form -->