cta newsletter #01
Newsletter CTA with benefits
1
Color options
Customize your colors.
<section class="overflow-hidden">
<div class="mx-auto px-8 md:px-12 lg:px-20 w-full max-w-7xl py-24">
<div class="max-w-xl mx-auto lg:text-balance lg:text-center">
<p class="text-sm relative text-base-500 text-blue-500">
The only newsletter we’d read too
</p>
<h2
class="text-2xl md:text-3xl lg:text-4xl mt-12 font-semibold tracking-tight text-base-900 lg:text-balance"
>
Want smarter ideas without the LinkedIn fluff?
</h2>
<p class="text-base mt-4 text-base-500">
Join the folks who like their updates useful, witty, and with just the
right amount of snark.
</p>
</div>
<dl
class="mt-12 grid grid-cols-1 md:grid-cols-3 gap-4 lg:text-center lg:text-balance"
>
<div>
<dt class="flex flex-col text-orange-600 lg:items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-external-brain size-5 text-blue-600"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M15.5 13a3.5 3.5 0 0 0 -3.5 3.5v1a3.5 3.5 0 0 0 7 0v-1.8"
></path>
<path
d="M8.5 13a3.5 3.5 0 0 1 3.5 3.5v1a3.5 3.5 0 0 1 -7 0v-1.8"
></path>
<path d="M17.5 16a3.5 3.5 0 0 0 0 -7h-.5"></path>
<path d="M19 9.3v-2.8a3.5 3.5 0 0 0 -7 0"></path>
<path d="M6.5 16a3.5 3.5 0 0 1 0 -7h.5"></path>
<path d="M5 9.3v-2.8a3.5 3.5 0 0 1 7 0v10"></path>
</svg>
<h3 class="undefined font-semibold text-base-900">
Stuff You’ll Actually Read
</h3>
</dt>
<dd>
<p class="text-sm mt-2 text-base-500">
Snappy insights, not recycled productivity tweets from 2016.
</p>
</dd>
</div>
<div>
<dt class="flex flex-col text-orange-600 lg:items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-arrow-tools size-5 text-blue-600"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M3 21h4l13 -13a1.5 1.5 0 0 0 -4 -4l-13 13v4"></path>
<path d="M14.5 5.5l4 4"></path>
<path d="M12 8l-5 -5l-4 4l5 5"></path>
<path d="M7 8l-1.5 1.5"></path>
<path d="M16 12l5 5l-4 4l-5 -5"></path>
<path d="M16 17l-1.5 1.5"></path>
</svg>
<h3 class="undefined font-semibold text-base-900">
No Hacks, Just Help
</h3>
</dt>
<dd>
<p class="text-sm mt-2 text-base-500">
Real tips for building, designing, and maybe surviving Mondays.
</p>
</dd>
</div>
<div>
<dt class="flex flex-col text-orange-600 lg:items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-arrow-alert-triangle size-5 text-blue-600"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M3 13a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v6a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"
></path>
<path
d="M9 9a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v10a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"
></path>
<path
d="M15 5a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v14a1 1 0 0 1 -1 1h-4a1 1 0 0 1 -1 -1z"
></path>
<path d="M4 20h14"></path>
</svg>
<h3 class="undefined font-semibold text-base-900">
Sent With Restraint
</h3>
</dt>
<dd>
<p class="text-sm mt-2 text-base-500">
One email a week. Two if we’re feeling needy. Never more.
</p>
</dd>
</div>
</dl>
<div class="flex w-full max-w-xs mx-auto items-center mt-12">
<div class="w-full">
<div class="flex justify-between items-baseline">
<label for="email" class="sr-only">Email address</label>
</div>
<div class="relative z-0 focus-within:z-10">
<div
class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="icon icon-tabler-arrow-mail size-4 text-base-500"
>
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path
d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z"
></path>
<path d="M3 7l9 6l9 -6"></path>
</svg>
</div>
<input
placeholder="Your inbox deserves better"
id="email"
name="email"
type="email"
class="w-full block transition duration-300 ease-in-out leading-tight align-middle focus:z-10 pl-10 h-9 px-4 py-2 text-xs rounded-tl-md rounded-bl-md bg-white border border-transparent text-base-500 ring-1 ring-base-200 placeholder-base-400 focus:border-blue-500 focus:ring-accent-100 focus:ring-2 focus:outline-none shadow-sm"
inputmode="email"
/>
</div>
</div>
<button
class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:outline-offset-2 focus:z-10 select-none text-white bg-blue-500 outline outline-accent-500 hover:bg-blue-600 focus:outline-accent-600 shadow-sm h-9 px-4 py-2 text-sm rounded-tr-md rounded-br-md"
type="submit"
>
Subscribe
</button>
</div>
</div>
</section>