<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-base-200 divide-y sm:divide-base-200"
>
<div class="flex w-full flex-1 items-center p-4">
<div class="w-full text-center text-balance">
<p
class="text-base leading-normal sm:text-lg md:text-xl text-base-900 font-medium"
>
Stay Informed with our newsletter
</p>
<p class="text-sm leading-normal text-base-500 mt-2 font-medium">
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-base-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-accent-500 hover:text-accent-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 w-full items-center justify-center border border-transparent rounded-br-xl px-4 py-3 text-sm font-medium 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>
