Simple icon + title + text triad
Create a 3-column feature row with Tailwind CSS. Each column has a rounded square icon badge, a title, and two lines of description, centered. Above them place an eyebrow label and a section heading. Keep it airy with generous vertical padding; stack to one column under md.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? .
Create a 3-column feature row with Tailwind CSS. Each column has a rounded square icon badge, a title, and two lines of description, centered. Above them place an eyebrow label and a section heading. Keep it airy with generous vertical padding; stack to one column under md.<section class="mx-auto max-w-5xl px-6 py-16 text-center">
<p class="text-sm font-medium uppercase tracking-wide text-neutral-400">Why teams choose us</p>
<h2 class="mt-2 text-3xl font-semibold text-neutral-900">Built for the way you work</h2>
<div class="mt-12 grid gap-10 md:grid-cols-3">
<div>
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 3 9 9-9 9-9-9 9-9Z"/><path d="m12 7 5 5-5 5-5-5 5-5Z"/></svg></div>
<h3 class="mt-4 font-semibold text-neutral-900">Flexible</h3>
<p class="mt-2 text-sm text-neutral-500">Adapt every workflow to your team without touching code.</p>
</div>
<div>
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M4 20V10m5 10V4m6 16v-7m5 7V7"/></svg></div>
<h3 class="mt-4 font-semibold text-neutral-900">Collaborative</h3>
<p class="mt-2 text-sm text-neutral-500">Comment, mention, and resolve without leaving the page.</p>
</div>
<div>
<div class="mx-auto flex h-12 w-12 items-center justify-center rounded-xl bg-neutral-900 text-white"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m12 4 9 16H3l9-16Z"/></svg></div>
<h3 class="mt-4 font-semibold text-neutral-900">Scalable</h3>
<p class="mt-2 text-sm text-neutral-500">From a solo project to ten thousand seats, same speed.</p>
</div>
</div>
</section>