Alternating Experiences
App Screenshot Previews
Award Showcase Grid
Bonus Content Grid
Course Card Grid
Course Offer Cards
Custom Section Benefits
Dual Product Cards
Filterable Portfolio
Offer Image Grid
Partners & Clients
Portfolio Reveal Grid
Quality Asym Images
Service Icon Grid
Specialty Icon Grid
STEM Learning Previews
Template Showcase Grid
Webinar Grid
#Newsletter CTA Logos
ctaPromotes newsletter sign-ups with a prominent CTA, email form, and logos for social proof.
NEWSLETTER
Stay Ahead of the Curve
Get weekly insights on industry trends, tech innovations, and growth strategies delivered to your inbox.
TRUSTED BY LEADING COMPANIES
<section class="container mx-auto my-8 px-6 lg:my-16 lg:px-16">
<div class="rounded-2xl bg-neutral-100 p-8 lg:p-16">
<div class="mx-auto max-w-3xl text-center">
<span
class="mb-4 inline-block rounded-full bg-blue-100 px-4 py-2 text-sm font-semibold text-blue-600"
>NEWSLETTER</span
>
<h2 class="mb-4 text-3xl font-bold lg:text-5xl">
Stay Ahead of the Curve
</h2>
<p class="mb-8 text-lg lg:text-xl">
Get weekly insights on industry trends, tech innovations, and growth
strategies delivered to your inbox.
</p>
<!-- Email Form -->
<form class="mb-8">
<div class="flex flex-col gap-4 lg:flex-row">
<input
type="email"
placeholder="Enter your email"
class="h-14 flex-grow rounded-lg border border-neutral-200 px-6 focus:border-blue-600 focus:outline-none"
/>
<button
class="h-14 rounded-lg bg-blue-600 px-8 text-lg font-semibold text-white hover:bg-blue-700"
>
Subscribe Now
</button>
</div>
</form>
<!-- Social Proof -->
<div class="flex flex-col items-center gap-4">
<p class="text-sm font-semibold text-neutral-600">
TRUSTED BY LEADING COMPANIES
</p>
<div class="flex flex-wrap items-center justify-center gap-8">
<img
src="https://placehold.co/120x40"
alt="Company Logo"
class="h-8 grayscale transition-all hover:grayscale-0"
/>
<img
src="https://placehold.co/120x40"
alt="Company Logo"
class="h-8 grayscale transition-all hover:grayscale-0"
/>
<img
src="https://placehold.co/120x40"
alt="Company Logo"
class="h-8 grayscale transition-all hover:grayscale-0"
/>
<img
src="https://placehold.co/120x40"
alt="Company Logo"
class="h-8 grayscale transition-all hover:grayscale-0"
/>
</div>
</div>
</div>
</div>
</section>
NEWSLETTER
Stay Ahead of the Curve
Get weekly insights on industry trends, tech innovations, and growth strategies delivered to your inbox.
TRUSTED BY LEADING COMPANIES
<section layout="container" space="m-x:auto m-y:large p-x:medium-3x tw-lg:m-y:big-3x tw-lg:p-x:big-3x">
<div space="p:large tw-lg:p:big-3x" visual="rounded:big bg:neutral-100">
<div space="m-x:auto max-w:[3xl]" visual="text:center">
<span
layout="inline" space="m-b:medium p-x:medium p-y:small" visual="rounded:round bg:blue-100 text-size:small font:tw-semibold text:blue-600"
>NEWSLETTER</span
>
<h2 space="m-b:medium" visual="text-size:grand font:tw-bold tw-lg:text-size:mount">
Stay Ahead of the Curve
</h2>
<p space="m-b:large" visual="text-size:large tw-lg:text-size:big">
Get weekly insights on industry trends, tech innovations, and growth
strategies delivered to your inbox.
</p>
<!-- Email Form -->
<form space="m-b:large">
<div layout="flex col tw-lg:row" space="g:medium">
<input
type="email"
placeholder="Enter your email"
layout="grow" space="h:big-2x p-x:medium-3x" visual="rounded:medium border-w:thin border:neutral-200 focus:border:blue-600 focus:outline:none"
/>
<button
space="h:big-2x p-x:large" visual="rounded:medium bg:blue-600 text-size:large font:tw-semibold text:white hover:bg:blue-700"
>
Subscribe Now
</button>
</div>
</form>
<!-- Social Proof -->
<div layout="flex col items:center" space="g:medium">
<p visual="text-size:small font:tw-semibold text:neutral-600">
TRUSTED BY LEADING COMPANIES
</p>
<div layout="flex wrap items:center justify:center" space="g:large">
<img
src="https://placehold.co/120x40"
alt="Company Logo"
space="h:large" visual="transition:all" class="grayscale hover:grayscale-0"
/>
<img
src="https://placehold.co/120x40"
alt="Company Logo"
space="h:large" visual="transition:all" class="grayscale hover:grayscale-0"
/>
<img
src="https://placehold.co/120x40"
alt="Company Logo"
space="h:large" visual="transition:all" class="grayscale hover:grayscale-0"
/>
<img
src="https://placehold.co/120x40"
alt="Company Logo"
space="h:large" visual="transition:all" class="grayscale hover:grayscale-0"
/>
</div>
</div>
</div>
</div>
</section>