Icon feature grid

A responsive grid of feature cards, each with an inline SVG icon tile, a heading and a short description.

Tailwind CSSLayoutsfeaturesgridiconscards

Live preview

Code

<section id="features" class="mx-auto max-w-6xl px-4 py-16" aria-labelledby="features-title">
  <h2 id="features-title" class="text-center text-3xl font-bold text-slate-900">Everything you need</h2>
  <p class="mx-auto mt-3 max-w-xl text-center text-slate-600">Small tools that stay out of your way.</p>

  <ul class="mt-12 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
    <li class="rounded-2xl border border-slate-200 bg-white p-6 transition hover:-translate-y-0.5 hover:border-indigo-300 motion-reduce:transform-none">
      <span class="flex size-11 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600">
        <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M13 3 4 14h7l-1 7 9-11h-7l1-7Z"/></svg>
      </span>
      <h3 class="mt-4 font-semibold text-slate-900">Fast by default</h3>
      <p class="mt-1 text-sm text-slate-600">Pages render in under a second on a mid range phone.</p>
    </li>
    <li class="rounded-2xl border border-slate-200 bg-white p-6 transition hover:-translate-y-0.5 hover:border-indigo-300 motion-reduce:transform-none">
      <span class="flex size-11 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600">
        <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>
      </span>
      <h3 class="mt-4 font-semibold text-slate-900">Private</h3>
      <p class="mt-1 text-sm text-slate-600">Your data is encrypted at rest and never sold.</p>
    </li>
    <li class="rounded-2xl border border-slate-200 bg-white p-6 transition hover:-translate-y-0.5 hover:border-indigo-300 motion-reduce:transform-none">
      <span class="flex size-11 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600">
        <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><circle cx="9" cy="8" r="3"/><circle cx="17" cy="9" r="2.5"/><path d="M3 20c0-3 3-5 6-5s6 2 6 5M16 15c3 0 5 1.5 5 4"/></svg>
      </span>
      <h3 class="mt-4 font-semibold text-slate-900">Team ready</h3>
      <p class="mt-1 text-sm text-slate-600">Invite colleagues and set roles in a minute.</p>
    </li>
    <li class="rounded-2xl border border-slate-200 bg-white p-6 transition hover:-translate-y-0.5 hover:border-indigo-300 motion-reduce:transform-none">
      <span class="flex size-11 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600">
        <svg class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 19V9m6 10V5m6 14v-7m4 7H3"/></svg>
      </span>
      <h3 class="mt-4 font-semibold text-slate-900">Clear reports</h3>
      <p class="mt-1 text-sm text-slate-600">See what changed each week without a spreadsheet.</p>
    </li>
  </ul>
</section>

How it works

What it solves

Feature sections tend to become walls of text. A grid of small cards with a consistent icon, title and one sentence is easy to scan and easy to extend, and it needs no icon font or image requests.

How it works

The wrapper is a definition-style dl replaced here by a plain ul of li cards for broad support. The grid uses grid-cols-1, then sm:grid-cols-2 and lg:grid-cols-3, so columns appear as width allows. Each card places a rounded tile containing an inline SVG that inherits colour through currentColor, which means a single text-indigo-600 class recolours every icon. Hover state adds a border tint and a subtle lift with transition and hover:-translate-y-0.5, and motion-reduce:transform-none respects users who prefer less movement. Icons are aria-hidden because the heading already names the feature.

Adapting it

Copy a list item and swap the path data. Any 24px outline icon set with stroke="currentColor" drops in. For a link card, wrap the content in an anchor and move the hover classes onto it.

Pitfalls

Keep descriptions to a similar length or the grid rows look ragged.
Decorative SVGs need aria-hidden="true" and focusable="false".
Do not animate with transform unless you also add a reduced-motion override.

How to use it

Paste features.html into a Tailwind 4 page.
Replace the four sample cards with your own titles and copy.
Swap the SVG path for icons from your set; keep the 24 by 24 viewBox.
Adjust the lg:grid-cols-3 value if you want two or four columns.

Licence: DEV3 Snippet Licence. Free to use, change and ship in personal and commercial projects. Attribution is appreciated, not required. Please do not redistribute snippets as a collection.

Related snippets

Tailwind CSS · LayoutsRoadmap status columnsA public product roadmap laid out as Planned, In progress and Shipped columns that stack on phones, using semantic sections and lists.roadmapcolumnsgrid

React / Next.js · LayoutsPrint stylesheet for a resume pageA small React resume component with print CSS that sets A4 page margins, hides controls and avoids awkward page breaks.printcssresume

Tailwind CSS · LayoutsLink-in-bio profile layoutA single-column mobile-first link page with avatar, bio, social icon row and a stack of large tappable link buttons.link-in-bioprofilemobile

Flutter · LayoutsMulti-service home gridResponsive grid of service tiles with icons, optional badges and a data-driven list that adapts column count to width.fluttergridhome