<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 ring-opacity-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>