Marketing
Inline Newsletter Form
One row, one field, one button - the smallest honest email capture.
#newsletter#inline#email
6 frameworksBeginner
Loading…
A three-up grid of benefits, each with an inline-SVG icon, title and copy.
<!--
A three-up benefits grid. One column on phones, two at sm, three at lg, so the
cells never crowd at 320px. Icons are inline SVG.
-->
<section class="w-full px-4 py-8">
<h2 class="mb-8 text-center text-2xl font-bold tracking-tight text-gray-900 sm:text-3xl dark:text-gray-100">Why teams switch</h2>
<ul class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
<li class="flex flex-col">
<span class="inline-flex h-11 w-11 items-center justify-center rounded-xl bg-blue-50 text-blue-600 dark:bg-blue-950 dark:text-blue-400">
<svg viewBox="0 0 24 24" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false">
<path d="m5 13 4 4L19 7" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</span>
<h3 class="mt-4 text-base font-semibold text-gray-900 dark:text-gray-100">Set up in minutes</h3>
<p class="mt-1.5 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Import your data and invite the team - no migration project required.</p>
</li>
<!-- repeat <li> per value prop -->
</ul>
</section>| Prop | Type | Default | Description |
|---|---|---|---|
heading | string | - | Heading |
itemsrequired | ValueProp[] | - | The array of items to render. |
className | string | - | Additional classes merged onto the root element. |
One column on phones, two at `sm`, three at `lg`, so the cells never crowd at 320px. Icons are inline SVG tinted with `currentColor`. Drive it entirely from the `items` prop; the `key` is the item title, so keep those unique.