<section class="mx-auto my-16 grid max-w-screen-md justify-items-center gap-8 text-center text-gray-900 dark:text-gray-50">
  <h3 class="text-5xl/[1.2] font-bold">Stay updated and trendy by subscribing to newsletter</h3>
  <p class="max-w-[70%]">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque, temporibus nobis harum alias dolorem consectetur?</p>
  <div
    class="relative ml-2 flex w-full max-w-md items-center justify-between rounded-full border border-gray-200/50 bg-transparent pl-4 shadow-md dark:border-gray-900 dark:shadow-gray-900/70">
    <input
      id="searchbar"
      type="search"
      class="w-full bg-transparent px-2 py-2.5 outline-none placeholder:font-normal placeholder:opacity-75"
      placeholder="Enter email address.." />
    <button
      class="my-1 mr-1 rounded-full border-[1.5px] border-transparent bg-black px-6 py-2 text-gray-50 transition-colors duration-100 hover:border-black focus-visible:outline focus-visible:outline-black/50 active:scale-[0.98] dark:bg-zinc-50 dark:text-gray-900">
      Subscribe
    </button>
  </div>
</section>