cta newsletter #01
1
Color options
Customize your colors.
<section>
<div class="relative px-8 py-32 mx-auto md:px-12 lg:px-24 max-w-7xl">
<div class="grid items-end grid-cols-1 gap-4 sm:grid-cols-2">
<div>
<h2
class="text-2xl md:text-3xl lg:text-4xl font-semibold text-base-900"
>
Join our newsletter
</h2>
<p class="text-base mt-4 text-base-500 font-medium">
Stay up to date with our latest news and updates.
</p>
</div>
<form class="w-full mt-8 sm:flex sm:max-w-md sm:ml-auto">
<label class="text-base sr-only"> Email address </label>
<input
id="email-address"
type="email"
name="email-address"
autocomplete="email"
placeholder="Enter your email"
aria-placeholder="Enter your email"
required=""
class="block w-full h-10 px-4 py-2 text-sm text-accent-700 duration-300 bg-white border border-transparent rounded-lg appearance-none ring-1 ring-base-200 placeholder-base-400 focus:border-base-300 focus:bg-transparent focus:outline-none focus:ring-accent-500 focus:ring-offset-2 focus:ring-2 sm:text-sm"
/>
<div class="mt-2 sm:ml-2 sm:mt-0 sm:flex-shrink-0">
<button
class="flex items-center justify-center text-center text-shadow-2xs font-semibold shadow-md ring inset-shadow-2xs hover:shadow-none items-center duration-300 ease-in-out transition-all focus:outline-2 outline-offset-2 focus:ring-offset-white text-white shadow-accent-600/20 inset-shadow-white/20 text-shadow-accent-500 ring-accent-600 bg-linear-to-b from-accent-500 to-accent-600 to-70% focus:outline-accent-600 h-10 px-6 py-3 text-base rounded-lg w-full sm:w-auto"
type="submit"
>
Subscribe
</button>
</div>
</form>
</div>
</div>
</section>