Features Section
A responsive Features Section for React and Tailwind that lays out product benefits in a clean icon-and-text grid. Copy-paste ready, with sensible defaults and an accessible layout.
⚡
Fast
Built in.
🎨
41 styles
Built in.
🧩
Copy-paste
Built in.
🔓
MIT
Built in.
Copy the code
export function FeaturesSection() {
const items = [['⚡','Fast'],['🎨','41 styles'],['🧩','Copy-paste'],['🔓','MIT']]
return (
<section className="mx-auto grid max-w-xl grid-cols-2 gap-3 text-white">
{items.map(([icon, title]) => (
<div key={title} className="rounded-2xl border border-white/10 bg-white/5 p-4">
<div className="text-xl">{icon}</div>
<h3 className="mt-2 font-bold">{title}</h3>
<p className="text-xs text-white/55">Built in.</p>
</div>
))}
</section>
)
}Tailwind CSS · no dependencies · MIT licensed. Paste it straight into any React, Next.js or Vite project.
About the features section
This features section is part of Empire UI - a free, open-source library of 34+ component types rendered across 41 visual styles, from glassmorphism to neo-brutalism. Every block is copy-paste ready in React and Tailwind CSS with no runtime dependencies.
Want it in a different look? Browse all 41 styles or grab the matching glassmorphism components.