notifications #01

<div class="p-8">
  <div
    class="flex flex-col w-full max-w-md mx-auto bg-white shadow-lg rounded-xl ring-1 ring-base-200 divide-y sm:divide-base-200"
  >
    <div class="flex items-center flex-1 w-full p-4">
      <div class="w-full text-center text-balance">
        <p class="text-lg md:text-xl font-medium text-base-900">
          Stay Informed with our newsletter
        </p>
        <p class="text-sm mt-2 font-medium text-base-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 flex-row w-full sm:divide-base-200 divide-x">
        <div class="flex flex-1">
          <button
            type="button"
            role="button"
            aria-label="Subscribe to newsletter"
            class="flex items-center justify-center w-full px-4 py-3 text-sm font-medium border border-transparent text-blue-500 hover:text-blue-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-accent-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 items-center justify-center w-full px-4 py-3 text-sm font-medium border border-transparent rounded-br-xl text-base-500 hover:text-base-500 focus:outline-none focus:ring-2 focus:ring-accent-500"
            tabindex="0"
          >
            No, thanks
          </button>
        </div>
      </div>
    </div>
  </div>
</div>