Skip to content

Feature Grid with Icons

Responsive Tailwind CSS feature section with six features, inline SVG icons, hairline dividers and a subtle hover accent.

Tailwind CSS Feature Sections Responsive #features #grid #icons #landing-page #responsive

Live preview

Open in new tab

Code

A six-item feature grid built with Tailwind CSS, where every feature has an inline SVG icon, a short title and one supporting sentence. It is a typical "Why choose us" block for SaaS landing pages, product tours and service websites.

How it works

The root is section.fg-features, labelled by the #fg-title heading. A centered header holds a small pill eyebrow, the heading and an intro paragraph. The features live in a ul with role="list": it stacks on phones, becomes two columns at sm:grid-cols-2 and three columns at lg:grid-cols-3.

The thin dividers between cells are not borders. The list uses gap-px on a tinted bg-emerald-900/10 background with overflow-hidden rounded-3xl, so the one-pixel gaps show through as clean hairlines and the outer corners stay rounded at every breakpoint.

Each cell is an li.fg-item with a white background, a span.fg-icon tile containing a 24×24 stroke icon, an h3 title and a paragraph. A small style.css adds what utilities cannot express neatly: a ::before accent bar on .fg-item that scales in along the top edge on hover, a light background tint, and a small lift and tilt of the .fg-icon tile. There is no JavaScript; the section works as plain HTML and CSS.

Customization

  • --fg-accent on .fg-features in style.css: changes the color of the hover accent bar at the top of each cell.
  • --fg-hover-bg on .fg-features in style.css: sets the background tint a cell gets on hover; use #ffffff to switch it off.
  • bg-emerald-600 and shadow-emerald-600/30 on each .fg-icon: replace with another Tailwind color such as bg-sky-600 to recolor the icon tiles.
  • lg:grid-cols-3 on the ul: use lg:grid-cols-2 for a two-column layout, or add xl:grid-cols-4 when you have eight features.
  • rounded-3xl on the ul: change to rounded-xl or rounded-none for a sharper, more technical look.
  • Swap the svg inside any .fg-icon for your own 24×24 icon; it inherits currentColor, so text-white controls its color.
  • bg-emerald-50/60 on the section: replace with bg-white or bg-stone-50 to match the page background.

Accessibility

The section is a landmark labelled by aria-labelledby="fg-title", and features use a real h2 and h3 hierarchy, so screen reader users can jump between them. Icon tiles have aria-hidden="true" because the titles already carry the meaning. role="list" keeps list semantics in Safari, which drops them when list styles are removed. The "See all features" link has a visible focus-visible:outline-2 ring. Stone text on white meets WCAG AA contrast, and all hover transitions are switched off under prefers-reduced-motion: reduce.

Usage notes

Requires the Tailwind browser build (added automatically) plus the short style.css. Because there is no script and all custom selectors start with fg-, several copies can sit on one page; give each copy a unique heading id.

Requirements

Add these to your page (already included in the download):

  • <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>

The Tailwind browser build is for prototyping. In production, compile Tailwind with its CLI or your bundler.

Feature Grid with Icons – Tailwind CSS feature sections component screenshot
Feature Grid with Icons · Tailwind CSS Feature Sections

More Feature Sections

Alternating Feature Rows – Bootstrap 5 feature sections preview

Alternating Feature Rows

Bootstrap 5 feature section with image and text rows that alternate sides on desktop, with icons, checklists, highlight chips and offset image shapes.

Bootstrap 5 Feature Sections