Tailwind Newsletter Components & Sections

<section
  class="pt-12 lg:pt-16 bg-gradient-to-b from-tk-tint-3 via-tk-tint-4 to-background pb-12 lg:pb-16"
>
  <div
    class="max-w-7xl mx-auto px-4 xl:px-0 flex flex-col items-center"
    data-tk-motion="reveal"
  >
    <div
      class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-tk-md inline-flex bg-background text-secondary-foreground px-2.5 py-1"
    >
      Newsletter
    </div>
    <h2
      class="mt-8 bg-gradient-to-b from-tk-title-start to-tk-title-end bg-clip-text text-center text-3xl font-semibold text-transparent sm:w-2/3 md:w-1/2 lg:mt-9 lg:text-4xl lg:leading-tight xl:w-1/2"
    >
      Stay in the Loop with Our Exclusive Newsletter
    </h2>
    <p
      class="mt-4 text-center text-sm font-medium text-muted-foreground sm:w-1/2 lg:w-2/5"
    >
      Get the latest updates, industry insights, and exclusive offers delivered
      straight to your inbox.
    </p>
    <form
      class="mt-8 flex w-full flex-col gap-y-2 sm:w-1/2 md:w-2/5 lg:mt-12 lg:flex-row lg:items-center lg:gap-x-4 lg:gap-y-0 xl:w-2/5"
    >
      <div class="flex w-full flex-col">
        <label for="email" class="sr-only">Email address</label>
        <div
          class="group relative rounded-tk-xl border border-input bg-background transition hover:bg-muted"
        >
          <input
            id="email"
            name="email"
            type="email"
            class="font-medium w-full rounded-tk-xl bg-transparent shadow-tk-sm text-sm placeholder:font-medium placeholder:text-sm text-card-foreground focus-visible:outline-none focus:shadow-tk-focus pl-10 pr-9 py-3 placeholder:text-tk-text-placeholder"
            autocomplete="email"
            placeholder="Enter your email"
          />
          <svg
            class="absolute top-1/2 -translate-y-1/2 left-0 flex h-5 items-center text-muted-foreground transition group-hover:text-tk-text-faint group-focus:text-muted-foreground ml-3"
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 24 24"
            fill="currentColor"
            aria-hidden="true"
            data-slot="icon"
          >
            <path
              d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z"
            />
            <path
              d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z"
            />
          </svg>
        </div>
      </div>
      <button
        type="submit"
        class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm bg-primary text-primary-foreground hover:bg-tk-primary-hover disabled:bg-primary/30 disabled:text-tk-primary-foreground-muted/70 px-5 py-3 rounded-tk-xl flex"
        data-tk-hover="press"
      >
        Get started
        <svg
          class="shrink-0 ml-3 h-5"
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="currentColor"
          aria-hidden="true"
          data-slot="icon"
        >
          <path
            fill-rule="evenodd"
            d="M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z"
            clip-rule="evenodd"
          />
        </svg>
      </button>
    </form>
  </div>
</section>