Call To Action Newsletter Subscription Using Tailwind UI
A Call to Action Newsletter Subscription element designed with Tailwind serves as an inviting and effective way to encourage users to join a newsletter and stay updated with the latest news and updates
cta
Loading component...
68 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Plus Jakarta Sans', sans-serif;
}
</style>
<div class="px-6 mx-auto my-8 max-w-7xl lg:px-8">
<div
class="relative px-6 py-20 overflow-hidden border-8 border-blue-200 shadow-2xl isolate bg-gradient-to-r from-blue-400 via-blue-600 to-blue-900 rounded-2xl sm:rounded-3xl sm:px-24">
<div class="flex items-center justify-center mx-auto mb-8 space-x-4 sm:space-x-12">
<span class="p-4 border rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-6 h-6 sm:w-10 sm:h-10 stroke-white">
<path stroke-linecap="round"
d="M16.5 12a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0zm0 0c0 1.657 1.007 3 2.25 3S21 13.657 21 12a9 9 0 10-2.636 6.364M16.5 12V8.25" />
</svg>
</span>
<span class="p-4 mb-8 border rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-6 h-6 sm:w-10 sm:h-10 stroke-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
</svg>
</span>
<span class="p-4 border rounded-full">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-6 h-6 sm:w-10 sm:h-10 stroke-white">
<path stroke-linecap="round" stroke-linejoin="round"
d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
</svg>
</span>
</div>
<h2 class="max-w-2xl mx-auto text-4xl font-bold tracking-tight text-center text-white sm:text-4xl">Stay in
touch</h2>
<p class="max-w-xl mx-auto mt-4 text-sm leading-8 text-center text-gray-200 sm:text-lg">
Subscribe to our newsletter to receive the latest updates on exclusive offers and discounts. We'll
provide valuable and relevant deals, so don't miss out on this opportunity!
</p>
<form class="flex max-w-md mx-auto mt-10 gap-x-4">
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" name="email" type="email" autocomplete="email" required=""
class="flex-auto min-w-0 px-6 py-3 text-white border-0 rounded-md shadow-sm bg-white/5 ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring-white sm:text-sm sm:leading-6 placeholder:text-gray-200 focus:outline-none"
placeholder="[email protected]">
<button type="submit"
class="flex-none rounded-md bg-white px-3.5 py-3 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white hover:scale-105">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3" />
</svg>
</button>
</form>
</div>
</div>