22 Tailwind CSS Feature Sections
13 / 22

All 22 in 22 Tailwind CSS Feature Sections

  1. 01Tailwind Tabbed Product Tour Feature Section
  2. 02Tailwind Alternating Feature Rows with Images
  3. 03Tailwind Feature Section with Stat Counters
  4. 04Tailwind Problem vs Solution Feature Section
  5. 05Tailwind Feature Section with Product Video
  6. 06Tailwind Integrations Logo Grid Section
  7. 07Tailwind Accordion Feature Cards Section
  8. 08Tailwind Plan Feature Comparison Columns
  9. 09Tailwind Security Compliance Badges Section
  10. 10Tailwind API Feature Section with Code
  11. 11Tailwind Feature Rows with Customer Quotes
  12. 12Tailwind Sticky Scroll Feature Section
  13. 13Tailwind Feature Section Icon Grid
  14. 14Tailwind Bento Grid Feature Section
  15. 15Tailwind Dark Glassmorphism Feature Section
  16. 16Tailwind Feature Cards with Scroll Reveal
  17. 17Tailwind Feature Section with Code Snippet
  18. 18Tailwind Feature Comparison Table Section
  19. 19Tailwind SaaS Features Section Grid
  20. 20Tailwind 3D Tilt Feature Cards Section
  21. 21Tailwind Feature Section with Phone Mockup
  22. 22Tailwind Vertical Timeline Feature Section
Pure TailwindMIT licensed

Tailwind Feature Section Icon Grid

The most-used feature layout, refined: six features in a hairline-ruled grid (gap-px over a tinted background), each with a gradient icon tile. On hover a soft radial spotlight blooms from the icon corner and the arrow link slides in — all group-hover:, no extra elements.

Live Demo
Plain CSSTailwind v4
Try it

Complete Tailwind CSS landing page templates in HTML, React, Next.js and Vue · from $49

Cruip · Affiliate link

Browse Cruip templates

The code

<section class="tfs-13 w-full min-h-svh bg-tfs13-bg px-5 py-20 font-tfs13-sans text-tfs13-ink antialiased sm:py-28" aria-labelledby="tfs-13-h">
  <div class="mx-auto grid w-full max-w-6xl gap-14">
    <header class="mx-auto grid max-w-2xl gap-4 text-center">
      <p class="mx-auto rounded-full bg-tfs13-acc/10 px-3 py-1 text-xs font-bold uppercase tracking-[0.16em] text-tfs13-acc">Features</p>
      <h2 id="tfs-13-h" class="text-balance text-4xl font-extrabold tracking-tight sm:text-5xl">Everything you need to ship a design system</h2>
      <p class="text-pretty text-lg text-tfs13-mut">Aperture keeps tokens, components and docs in lockstep — from Figma to production.</p>
    </header>
    <ul class="grid gap-px overflow-hidden rounded-3xl bg-tfs13-line ring-1 ring-tfs13-line sm:grid-cols-2 lg:grid-cols-3">
      <li class="group relative grid content-start gap-4 overflow-hidden bg-white p-8 transition">
        <span aria-hidden="true" class="pointer-events-none absolute -left-16 -top-16 size-64 rounded-full bg-tfs13-acc/10 opacity-0 blur-2xl transition duration-500 group-hover:opacity-100"></span>
        <span class="relative grid size-12 place-items-center rounded-2xl bg-linear-to-br from-indigo-500 to-violet-500 text-white shadow-lg ring-1 ring-inset ring-white/30 transition duration-300 group-hover:-rotate-6 group-hover:scale-110"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="m12 2 10 5-10 5L2 7l10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg></span>
        <h3 class="relative text-lg font-bold">Token pipeline</h3>
        <p class="relative text-pretty text-tfs13-mut">Edit a colour in Figma; every platform gets a typed token by the next build.</p>
        <a href="#tfs-13-h" class="relative inline-flex min-h-11 w-fit -translate-x-1 items-center gap-1.5 text-sm font-semibold text-tfs13-acc opacity-70 transition group-hover:translate-x-0 group-hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tfs13-acc pointer-coarse:opacity-100">Learn more<span class="sr-only"> about Token pipeline</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
      </li>
      <li class="group relative grid content-start gap-4 overflow-hidden bg-white p-8 transition">
        <span aria-hidden="true" class="pointer-events-none absolute -left-16 -top-16 size-64 rounded-full bg-tfs13-acc/10 opacity-0 blur-2xl transition duration-500 group-hover:opacity-100"></span>
        <span class="relative grid size-12 place-items-center rounded-2xl bg-linear-to-br from-sky-500 to-cyan-400 text-white shadow-lg ring-1 ring-inset ring-white/30 transition duration-300 group-hover:-rotate-6 group-hover:scale-110"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="m16 18 6-6-6-6M8 6l-6 6 6 6"/></svg></span>
        <h3 class="relative text-lg font-bold">Component codegen</h3>
        <p class="relative text-pretty text-tfs13-mut">React, Vue and SwiftUI stubs generated from the same spec.</p>
        <a href="#tfs-13-h" class="relative inline-flex min-h-11 w-fit -translate-x-1 items-center gap-1.5 text-sm font-semibold text-tfs13-acc opacity-70 transition group-hover:translate-x-0 group-hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tfs13-acc pointer-coarse:opacity-100">Learn more<span class="sr-only"> about Component codegen</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
      </li>
      <li class="group relative grid content-start gap-4 overflow-hidden bg-white p-8 transition">
        <span aria-hidden="true" class="pointer-events-none absolute -left-16 -top-16 size-64 rounded-full bg-tfs13-acc/10 opacity-0 blur-2xl transition duration-500 group-hover:opacity-100"></span>
        <span class="relative grid size-12 place-items-center rounded-2xl bg-linear-to-br from-rose-500 to-orange-400 text-white shadow-lg ring-1 ring-inset ring-white/30 transition duration-300 group-hover:-rotate-6 group-hover:scale-110"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/></svg></span>
        <h3 class="relative text-lg font-bold">Visual regression</h3>
        <p class="relative text-pretty text-tfs13-mut">Every PR screenshots 400 states and flags the 3 that changed.</p>
        <a href="#tfs-13-h" class="relative inline-flex min-h-11 w-fit -translate-x-1 items-center gap-1.5 text-sm font-semibold text-tfs13-acc opacity-70 transition group-hover:translate-x-0 group-hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tfs13-acc pointer-coarse:opacity-100">Learn more<span class="sr-only"> about Visual regression</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
      </li>
      <li class="group relative grid content-start gap-4 overflow-hidden bg-white p-8 transition">
        <span aria-hidden="true" class="pointer-events-none absolute -left-16 -top-16 size-64 rounded-full bg-tfs13-acc/10 opacity-0 blur-2xl transition duration-500 group-hover:opacity-100"></span>
        <span class="relative grid size-12 place-items-center rounded-2xl bg-linear-to-br from-emerald-500 to-teal-400 text-white shadow-lg ring-1 ring-inset ring-white/30 transition duration-300 group-hover:-rotate-6 group-hover:scale-110"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8"/></svg></span>
        <h3 class="relative text-lg font-bold">Contribution flow</h3>
        <p class="relative text-pretty text-tfs13-mut">Propose, review and merge new components without leaving the docs.</p>
        <a href="#tfs-13-h" class="relative inline-flex min-h-11 w-fit -translate-x-1 items-center gap-1.5 text-sm font-semibold text-tfs13-acc opacity-70 transition group-hover:translate-x-0 group-hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tfs13-acc pointer-coarse:opacity-100">Learn more<span class="sr-only"> about Contribution flow</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
      </li>
      <li class="group relative grid content-start gap-4 overflow-hidden bg-white p-8 transition">
        <span aria-hidden="true" class="pointer-events-none absolute -left-16 -top-16 size-64 rounded-full bg-tfs13-acc/10 opacity-0 blur-2xl transition duration-500 group-hover:opacity-100"></span>
        <span class="relative grid size-12 place-items-center rounded-2xl bg-linear-to-br from-amber-500 to-yellow-400 text-white shadow-lg ring-1 ring-inset ring-white/30 transition duration-300 group-hover:-rotate-6 group-hover:scale-110"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM21 21l-4.3-4.3"/></svg></span>
        <h3 class="relative text-lg font-bold">Usage analytics</h3>
        <p class="relative text-pretty text-tfs13-mut">See where each component ships and which props nobody uses.</p>
        <a href="#tfs-13-h" class="relative inline-flex min-h-11 w-fit -translate-x-1 items-center gap-1.5 text-sm font-semibold text-tfs13-acc opacity-70 transition group-hover:translate-x-0 group-hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tfs13-acc pointer-coarse:opacity-100">Learn more<span class="sr-only"> about Usage analytics</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
      </li>
      <li class="group relative grid content-start gap-4 overflow-hidden bg-white p-8 transition">
        <span aria-hidden="true" class="pointer-events-none absolute -left-16 -top-16 size-64 rounded-full bg-tfs13-acc/10 opacity-0 blur-2xl transition duration-500 group-hover:opacity-100"></span>
        <span class="relative grid size-12 place-items-center rounded-2xl bg-linear-to-br from-fuchsia-500 to-pink-500 text-white shadow-lg ring-1 ring-inset ring-white/30 transition duration-300 group-hover:-rotate-6 group-hover:scale-110"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></span>
        <h3 class="relative text-lg font-bold">Accessibility lint</h3>
        <p class="relative text-pretty text-tfs13-mut">Contrast, focus order and ARIA checked on every change.</p>
        <a href="#tfs-13-h" class="relative inline-flex min-h-11 w-fit -translate-x-1 items-center gap-1.5 text-sm font-semibold text-tfs13-acc opacity-70 transition group-hover:translate-x-0 group-hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tfs13-acc pointer-coarse:opacity-100">Learn more<span class="sr-only"> about Accessibility lint</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
      </li>
    </ul>
  </div>
</section>
@import "tailwindcss";

@theme {
  --color-tfs13-bg: #f8f8fc;
  --color-tfs13-bg: oklch(0.98 0.005 286);
  --color-tfs13-ink: #111827;
  --color-tfs13-ink: oklch(0.21 0.032 265);
  --color-tfs13-mut: #4b5563;
  --color-tfs13-mut: oklch(0.446 0.026 257);
  --color-tfs13-line: #e5e7f0;
  --color-tfs13-line: oklch(0.929 0.012 276);
  --color-tfs13-acc: #4f46e5;
  --color-tfs13-acc: oklch(0.511 0.23 277);
  --font-tfs13-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.tfs-13 {
  width: 100%;
  min-height: 100svh;
}

Setup — do this once per project

Skip this if your project already runs Tailwind v4.

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

Compiles in the browser — perfect for a CodePen or a quick test, not for production.

2Add the stylesheetRequiredthe @theme block is what makes the custom utilities exist
@import "tailwindcss";

@theme {
  --color-tfs13-bg: #f8f8fc;
  --color-tfs13-bg: oklch(0.98 0.005 286);
  --color-tfs13-ink: #111827;
  --color-tfs13-ink: oklch(0.21 0.032 265);
  --color-tfs13-mut: #4b5563;
  --color-tfs13-mut: oklch(0.446 0.026 257);
  --color-tfs13-line: #e5e7f0;
  --color-tfs13-line: oklch(0.929 0.012 276);
  --color-tfs13-acc: #4f46e5;
  --color-tfs13-acc: oklch(0.511 0.23 277);
  --font-tfs13-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.tfs-13 {
  width: 100%;
  min-height: 100svh;
}
3Fonts used by this demooptional — skip if you have your own type stack
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400..800&display=swap">

What changed in the port

Which parts became utilities, which stayed CSS, and why.

  • The CSS original's per-card borders became gap-px over a tinted grid background — one class instead of four border rules and their edge cases.
  • UI upgrade from the CSS original: a radial spotlight blooms on hover and the icon tile tilts, giving each cell a tactile response.
  • UI upgrade: every card gained a 'Learn more' link with an sr-only suffix naming the feature, so screen readers don't hear six identical links.
  • UI upgrade: gradient icon tiles with an inner bevel replace flat grey circles.
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS demo from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Tailwind Feature Section Icon Grid
Source: https://codefronts.com/layouts/tailwind-css-feature-sections/tailwind-feature-section-icon-grid/

The most-used feature layout, refined: six features in a hairline-ruled grid (gap-px over a tinted background), each with a gradient icon tile. On hover a soft radial spotlight blooms from the icon corner and the arrow link slides in — all group-hover:, no extra elements.
## HTML
```html
<section class="tfs-13 w-full min-h-svh bg-tfs13-bg px-5 py-20 font-tfs13-sans text-tfs13-ink antialiased sm:py-28" aria-labelledby="tfs-13-h">
  <div class="mx-auto grid w-full max-w-6xl gap-14">
    <header class="mx-auto grid max-w-2xl gap-4 text-center">
      <p class="mx-auto rounded-full bg-tfs13-acc/10 px-3 py-1 text-xs font-bold uppercase tracking-[0.16em] text-tfs13-acc">Features</p>
      <h2 id="tfs-13-h" class="text-balance text-4xl font-extrabold tracking-tight sm:text-5xl">Everything you need to ship a design system</h2>
      <p class="text-pretty text-lg text-tfs13-mut">Aperture keeps tokens, components and docs in lockstep — from Figma to production.</p>
    </header>
    <ul class="grid gap-px overflow-hidden rounded-3xl bg-tfs13-line ring-1 ring-tfs13-line sm:grid-cols-2 lg:grid-cols-3">
      <li class="group relative grid content-start gap-4 overflow-hidden bg-white p-8 transition">
        <span aria-hidden="true" class="pointer-events-none absolute -left-16 -top-16 size-64 rounded-full bg-tfs13-acc/10 opacity-0 blur-2xl transition duration-500 group-hover:opacity-100"></span>
        <span class="relative grid size-12 place-items-center rounded-2xl bg-linear-to-br from-indigo-500 to-violet-500 text-white shadow-lg ring-1 ring-inset ring-white/30 transition duration-300 group-hover:-rotate-6 group-hover:scale-110"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="m12 2 10 5-10 5L2 7l10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg></span>
        <h3 class="relative text-lg font-bold">Token pipeline</h3>
        <p class="relative text-pretty text-tfs13-mut">Edit a colour in Figma; every platform gets a typed token by the next build.</p>
        <a href="#tfs-13-h" class="relative inline-flex min-h-11 w-fit -translate-x-1 items-center gap-1.5 text-sm font-semibold text-tfs13-acc opacity-70 transition group-hover:translate-x-0 group-hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tfs13-acc pointer-coarse:opacity-100">Learn more<span class="sr-only"> about Token pipeline</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
      </li>
      <li class="group relative grid content-start gap-4 overflow-hidden bg-white p-8 transition">
        <span aria-hidden="true" class="pointer-events-none absolute -left-16 -top-16 size-64 rounded-full bg-tfs13-acc/10 opacity-0 blur-2xl transition duration-500 group-hover:opacity-100"></span>
        <span class="relative grid size-12 place-items-center rounded-2xl bg-linear-to-br from-sky-500 to-cyan-400 text-white shadow-lg ring-1 ring-inset ring-white/30 transition duration-300 group-hover:-rotate-6 group-hover:scale-110"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="m16 18 6-6-6-6M8 6l-6 6 6 6"/></svg></span>
        <h3 class="relative text-lg font-bold">Component codegen</h3>
        <p class="relative text-pretty text-tfs13-mut">React, Vue and SwiftUI stubs generated from the same spec.</p>
        <a href="#tfs-13-h" class="relative inline-flex min-h-11 w-fit -translate-x-1 items-center gap-1.5 text-sm font-semibold text-tfs13-acc opacity-70 transition group-hover:translate-x-0 group-hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tfs13-acc pointer-coarse:opacity-100">Learn more<span class="sr-only"> about Component codegen</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
      </li>
      <li class="group relative grid content-start gap-4 overflow-hidden bg-white p-8 transition">
        <span aria-hidden="true" class="pointer-events-none absolute -left-16 -top-16 size-64 rounded-full bg-tfs13-acc/10 opacity-0 blur-2xl transition duration-500 group-hover:opacity-100"></span>
        <span class="relative grid size-12 place-items-center rounded-2xl bg-linear-to-br from-rose-500 to-orange-400 text-white shadow-lg ring-1 ring-inset ring-white/30 transition duration-300 group-hover:-rotate-6 group-hover:scale-110"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12zM12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/></svg></span>
        <h3 class="relative text-lg font-bold">Visual regression</h3>
        <p class="relative text-pretty text-tfs13-mut">Every PR screenshots 400 states and flags the 3 that changed.</p>
        <a href="#tfs-13-h" class="relative inline-flex min-h-11 w-fit -translate-x-1 items-center gap-1.5 text-sm font-semibold text-tfs13-acc opacity-70 transition group-hover:translate-x-0 group-hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tfs13-acc pointer-coarse:opacity-100">Learn more<span class="sr-only"> about Visual regression</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
      </li>
      <li class="group relative grid content-start gap-4 overflow-hidden bg-white p-8 transition">
        <span aria-hidden="true" class="pointer-events-none absolute -left-16 -top-16 size-64 rounded-full bg-tfs13-acc/10 opacity-0 blur-2xl transition duration-500 group-hover:opacity-100"></span>
        <span class="relative grid size-12 place-items-center rounded-2xl bg-linear-to-br from-emerald-500 to-teal-400 text-white shadow-lg ring-1 ring-inset ring-white/30 transition duration-300 group-hover:-rotate-6 group-hover:scale-110"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM22 21v-2a4 4 0 0 0-3-3.9M16 3.1a4 4 0 0 1 0 7.8"/></svg></span>
        <h3 class="relative text-lg font-bold">Contribution flow</h3>
        <p class="relative text-pretty text-tfs13-mut">Propose, review and merge new components without leaving the docs.</p>
        <a href="#tfs-13-h" class="relative inline-flex min-h-11 w-fit -translate-x-1 items-center gap-1.5 text-sm font-semibold text-tfs13-acc opacity-70 transition group-hover:translate-x-0 group-hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tfs13-acc pointer-coarse:opacity-100">Learn more<span class="sr-only"> about Contribution flow</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
      </li>
      <li class="group relative grid content-start gap-4 overflow-hidden bg-white p-8 transition">
        <span aria-hidden="true" class="pointer-events-none absolute -left-16 -top-16 size-64 rounded-full bg-tfs13-acc/10 opacity-0 blur-2xl transition duration-500 group-hover:opacity-100"></span>
        <span class="relative grid size-12 place-items-center rounded-2xl bg-linear-to-br from-amber-500 to-yellow-400 text-white shadow-lg ring-1 ring-inset ring-white/30 transition duration-300 group-hover:-rotate-6 group-hover:scale-110"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16zM21 21l-4.3-4.3"/></svg></span>
        <h3 class="relative text-lg font-bold">Usage analytics</h3>
        <p class="relative text-pretty text-tfs13-mut">See where each component ships and which props nobody uses.</p>
        <a href="#tfs-13-h" class="relative inline-flex min-h-11 w-fit -translate-x-1 items-center gap-1.5 text-sm font-semibold text-tfs13-acc opacity-70 transition group-hover:translate-x-0 group-hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tfs13-acc pointer-coarse:opacity-100">Learn more<span class="sr-only"> about Usage analytics</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
      </li>
      <li class="group relative grid content-start gap-4 overflow-hidden bg-white p-8 transition">
        <span aria-hidden="true" class="pointer-events-none absolute -left-16 -top-16 size-64 rounded-full bg-tfs13-acc/10 opacity-0 blur-2xl transition duration-500 group-hover:opacity-100"></span>
        <span class="relative grid size-12 place-items-center rounded-2xl bg-linear-to-br from-fuchsia-500 to-pink-500 text-white shadow-lg ring-1 ring-inset ring-white/30 transition duration-300 group-hover:-rotate-6 group-hover:scale-110"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></span>
        <h3 class="relative text-lg font-bold">Accessibility lint</h3>
        <p class="relative text-pretty text-tfs13-mut">Contrast, focus order and ARIA checked on every change.</p>
        <a href="#tfs-13-h" class="relative inline-flex min-h-11 w-fit -translate-x-1 items-center gap-1.5 text-sm font-semibold text-tfs13-acc opacity-70 transition group-hover:translate-x-0 group-hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tfs13-acc pointer-coarse:opacity-100">Learn more<span class="sr-only"> about Accessibility lint</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
      </li>
    </ul>
  </div>
</section>
```
## CSS
```css
@import "tailwindcss";

@theme {
  --color-tfs13-bg: #f8f8fc;
  --color-tfs13-bg: oklch(0.98 0.005 286);
  --color-tfs13-ink: #111827;
  --color-tfs13-ink: oklch(0.21 0.032 265);
  --color-tfs13-mut: #4b5563;
  --color-tfs13-mut: oklch(0.446 0.026 257);
  --color-tfs13-line: #e5e7f0;
  --color-tfs13-line: oklch(0.929 0.012 276);
  --color-tfs13-acc: #4f46e5;
  --color-tfs13-acc: oklch(0.511 0.23 277);
  --font-tfs13-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
}
/* Root rule: the full-bleed contract, stated in CSS as well as in the markup's utilities, so the
   stage is sized before the browser build compiles. */

.tfs-13 {
  width: 100%;
  min-height: 100svh;
}
```

How this works

Rules for free. The grid's background is the line colour, each cell is opaque white, and gap-px leaves exactly one pixel of background showing between cells. Outer corners round with overflow-hidden rounded-3xl on the grid.

Spotlight layer. Each cell holds an absolutely positioned radial gradient at opacity-0; group-hover:opacity-100 fades it in from the icon corner while the 'Learn more' link slides in with group-hover:translate-x-0.

Make it yours

  • Change icon tile gradients per feature by editing the from-/to- utilities.
  • Switch to four columns with lg:grid-cols-4 and eight features.
  • Remove the spotlight by deleting the aria-hidden gradient span.

Gotchas — read before shipping

  • gap-px rules disappear if a cell is transparent — keep cells opaque.
  • A partial last row shows the background colour; keep the count a multiple of the column count.
  • Hover-only reveals need a non-hover equivalent: the link is visible on touch via pointer-coarse:.

Browser support

ChromeSafariFirefoxEdge
111+16.4+128+111+

Plain grid and gradients; the floor is Tailwind v4.

Techniques used in this demo

Utilitiesfirst-class utility or variant

gridtw ↗radial-gradient()tw ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →