Three-column icons

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>