notifications

<div class="p-8">
  <div
    class="flex w-full max-w-md mx-auto flex-col rounded-xl bg-white shadow-lg ring-1 ring-black/5 divide-y sm:divide-gray-200"
  >
    <div class="flex w-full flex-1 items-center p-4">
      <div class="w-full text-center text-balance">
        <p class="tracking-tight text-lg font-medium text-gray-900">
          Stay Informed with our newsletter
        </p>
        <p class="mt-2 text-sm text-gray-500">
          Get the latest updates, exclusive offers, and inspiring content
          delivered to your inbox.
        </p>
      </div>
    </div>
    <div class="flex w-full">
      <div class="flex w-full flex-row sm:divide-gray-200 divide-x">
        <div class="flex flex-1">
          <button
            type="button"
            role="button"
            aria-label="Subscribe to newsletter"
            class="flex w-full items-center justify-center border border-transparent px-4 py-3 text-sm font-medium text-blue-500 hover:text-blue-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-blue-500 rounded-bl-xl"
            tabindex="0"
          >
            Subscribe
          </button>
        </div>
        <div class="flex flex-1">
          <button
            type="button"
            role="button"
            aria-label="Decline newsletter subscription"
            class="flex w-full items-center justify-center border border-transparent rounded-br-xl px-4 py-3 text-sm font-medium text-gray-500 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500"
            tabindex="0"
          >
            No, thanks
          </button>
        </div>
      </div>
    </div>
  </div>
</div>