Newsletter Subscription Form 2

<!--
  Day 29: Newsletter subscription form 2

  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-4xl grid-cols-1 overflow-hidden rounded-xl bg-white ring-8 shadow-sm shadow-zinc-500/10 ring-zinc-900/5 md:grid-cols-2"
>
  <!-- Promo Image -->
  <img
    src="https://images.unsplash.com/photo-1559163330-c30bac8c5031?q=80&w=900&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
    alt="Promo Image"
    class="aspect-16/9 w-full object-cover md:aspect-15/16"
  />
  <!-- END Promo Image -->

  <!-- Body -->
  <div class="flex grow items-center p-6 md:p-12">
    <div class="grow">
      <h3 class="text-2xl font-extrabold">Subscribe to our newsletter</h3>
      <p class="mt-2 text-sm leading-relaxed text-zinc-600">
        Join <strong>20,000+</strong> subscribers and get the best web
        development articles and tutorials directly to your inbox every week!
      </p>
      <form class="mt-5 space-y-3">
        <input
          type="email"
          required
          class="block w-full rounded-lg border border-zinc-200 px-4 py-2.5 text-sm/6 font-medium placeholder-zinc-500 focus:border-zinc-500 focus:ring-3 focus:ring-zinc-500/50"
          placeholder="Enter your email.."
        />
        <button
          type="submit"
          class="flex w-full items-center justify-center gap-2 rounded-lg border border-zinc-800 bg-zinc-800 px-4 py-3 text-sm leading-5 font-medium text-white hover:border-zinc-900 hover:bg-zinc-900 hover:text-white focus:ring-2 focus:ring-zinc-500/50 focus:outline-hidden active:border-zinc-700 active:bg-zinc-700"
        >
          Subscribe now
        </button>
        <p class="text-center text-xs font-medium text-zinc-500">
          No spam ever, unsubscribe at any time
        </p>
      </form>
    </div>
  </div>
  <!-- END Body -->
</div>
<!-- END Newsletter Form -->