Explore Tailwind CSS feature section examples to showcase the key features of your product or service. These blocks offer a range of layouts and styles, making it easy to present information clearly and effectively.
"use client";
import {
LayoutDashboard,
PencilRuler,
Sparkles,
TrendingUp,
Wind,
Zap,
} from "lucide-react";
import { Card, Text } from "@hummingbirdui/react";
import { cn } from "@hummingbirdui/react/utils";
const features = [
{
icon: Wind,
title: "Effortless User Flow",
description:
"Guide users step by step with a structure that feels natural and predictable.",
className: "bg-primary-lighter text-primary",
},
{
icon: Sparkles,
title: "Meaningful Feedback",
description:
"Every interaction responds clearly, helping users stay confident and in control.",
className: "bg-warning-lighter text-warning",
},
{
icon: PencilRuler,
title: "Flexible Architecture",
description:
"Adapt your UI easily as new features and requirements evolve.",
className: "bg-danger-lighter text-danger",
},
{
icon: LayoutDashboard,
title: "Consistent Layouts",
description:
"Maintain clarity and structure across every screen and component.",
className: "bg-secondary-lighter text-secondary",
},
{
icon: Zap,
title: "Fast Interactions",
description:
"Reduce delays and keep workflows smooth across all touchpoints.",
className: "bg-info-lighter text-info",
},
{
icon: TrendingUp,
title: "Built to Scale",
description: "Create a foundation that supports long-term product growth.",
className: "bg-success-lighter text-success",
},
];
export default function Feature1() {
return (
<section className="px-6 py-20 max-w-7xl mx-auto">
<div className="text-center max-w-2xl mx-auto mb-12">
<Text as="h2" size="4xl" className="sm:text-5xl mb-6">
Build Experiences That Feel Effortless from Start to Finish
</Text>
<Text size="lg" className="text-muted">
Create applications that feel smooth and natural while helping users
stay focused and move forward with clarity at every moment
</Text>
</div>
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
{features.map((feature) => (
<Card
key={feature.title}
className="p-6 rounded-2xl border-subtle hover:border-primary-light"
>
<div
className={cn(
"flex items-center justify-center size-12 rounded-lg mb-6",
feature.className,
)}
>
<feature.icon className="size-6" />
</div>
<Text as="h3" size="lg" fontWeight="semibold" className="mb-2">
{feature.title}
</Text>
<Text size="base" className="text-muted mb-6">
{feature.description}
</Text>
<a href="#" className="font-semibold no-underline">
Learn more →
</a>
</Card>
))}
</div>
</section>
);
}"use client";
import { MonitorCheck, TrendingUp, Zap } from "lucide-react";
import { Button, Card, Text } from "@hummingbirdui/react";
import { cn } from "@hummingbirdui/react/utils";
const features = [
{
icon: MonitorCheck,
title: "Intuitive by design",
description:
"Reduce cognitive load and guide users naturally through every flow.",
className: "bg-primary-lighter text-primary",
},
{
icon: Zap,
title: "Lightning-fast performance",
description:
"Built for speed to keep users engaged without friction or delay.",
className: "bg-secondary-lighter text-secondary",
},
{
icon: TrendingUp,
title: "Built to scale",
description: "Grow your product without redesigning your foundation.",
className: "bg-success-lighter text-success",
},
];
export default function Feature2() {
return (
<section className="px-6 py-20 max-w-3xl lg:max-w-7xl mx-auto">
<div className="grid lg:grid-cols-2 gap-20 items-center">
<div>
<Text as="h2" size="4xl" className="sm:text-5xl mb-3">
Everything you need to build better products
</Text>
<Text size="lg" className="text-muted max-w-xl mb-10">
A thoughtfully crafted system that helps you design faster, ship
confidently, and scale without friction.
</Text>
<div className="space-y-3 mb-10">
{features.map((feature) => (
<div key={feature.title} className="flex gap-5">
<div
className={cn(
"flex items-center justify-center size-12 rounded-xl shrink-0",
feature.className,
)}
>
<feature.icon className="size-5" />
</div>
<div>
<Text as="h3" size="base" fontWeight="semibold">
{feature.title}
</Text>
<Text size="sm" className="text-muted">
{feature.description}
</Text>
</div>
</div>
))}
</div>
<div className="flex items-center gap-3">
<Button asChild>
<a href="#">Get started</a>
</Button>
<Button asChild color={null}>
<a href="#">Explore all features</a>
</Button>
</div>
</div>
<div className="relative aspect-4/3 max-w-xl">
<img
className="size-full object-cover rounded-xl"
src="https://images.unsplash.com/photo-1532102235608-dc8fc689c9ab?q=80&w=1170&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt=""
/>
<Card className="absolute bottom-3 left-3 lg:-bottom-6 lg:-left-6 p-4 w-48 border-primary-light rounded-xl">
<Text size="sm" fontWeight="semibold" className="mb-2">
+32% faster workflows
</Text>
<span className="text-xs text-muted">
Measured after UI improvements
</span>
</Card>
</div>
</div>
</section>
);
}"use client";
import { Card, Text } from "@hummingbirdui/react";
import { cn } from "@hummingbirdui/react/utils";
const features = [
{
title: "Seamless user experience",
description:
"Designed to guide users naturally through every step without friction or confusion",
image:
"https://images.unsplash.com/photo-1728044849280-10a1a75cff83?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
alt: "feature_1",
titleClassName: "font-semibold",
className: "lg:col-span-8 rounded-t-3xl lg:rounded-tr-xl",
wide: true,
},
{
title: "Fast performance",
description:
"Optimized for fast load times and smooth interactions across all devices",
image:
"https://images.unsplash.com/photo-1625296276703-3fbc924f07b5?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
alt: "feature_2",
titleClassName: "font-semibold",
className: "md:col-span-6 lg:col-span-4 lg:rounded-tr-3xl",
},
{
title: "Built for real world projects",
description: "Adapt easily as your application grows and evolves over time",
image:
"https://images.unsplash.com/photo-1535957998253-26ae1ef29506?q=80&w=872&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
alt: "feature_3",
titleClassName: "text-xl",
className: "md:col-span-6 lg:col-span-4 lg:rounded-bl-3xl",
},
{
title: "Clean interface design",
description:
"Crafted with a focus on clarity and simplicity to create a distraction free and user friendly experience",
image:
"https://images.unsplash.com/photo-1686061594225-3e92c0cd51b0?q=80&w=1742&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
alt: "feature_4",
titleClassName: "font-semibold",
className: "lg:col-span-8 rounded-b-3xl lg:rounded-bl-xl",
wide: true,
},
];
export default function Feature3() {
return (
<div className="px-6 py-20 max-w-7xl mx-auto">
<div className="max-w-3xl mb-12">
<Text as="h1" size="4xl" className="sm:text-5xl mb-6">
Design Experiences That Feel Natural from the First Interaction
</Text>
<Text size="lg" className="text-muted">
Create applications that guide users smoothly through every step and
help them stay focused with clarity and confidence
</Text>
</div>
<div className="grid gap-6 grid-cols-12">
{features.map((feature) => (
<Card
key={feature.title}
className={cn(
"col-span-12 p-6 bg-default rounded-xl border-subtle",
feature.className,
)}
>
<Text
as="h6"
className={cn("mb-2 text-default", feature.titleClassName)}
>
{feature.title}
</Text>
<Text className={cn("mb-6 text-muted", feature.wide && "max-w-md")}>
{feature.description}
</Text>
<img
className="h-80 w-full object-cover rounded-lg"
src={feature.image}
alt={feature.alt}
/>
</Card>
))}
</div>
</div>
);
}"use client";
import { Blocks, Layers, Smartphone } from "lucide-react";
import { Card, Text } from "@hummingbirdui/react";
import { cn } from "@hummingbirdui/react/utils";
const features = [
{
icon: Layers,
title: "Clear visual hierarchy",
description:
"Present information in a way that feels structured and easy to follow, reducing cognitive load.",
className: "bg-primary-lighter text-primary",
},
{
icon: Smartphone,
title: "Responsive interaction design",
description:
"Ensure every interaction feels smooth across different devices, from mobile gestures to desktop hovers.",
className: "bg-secondary-lighter text-secondary",
},
{
icon: Blocks,
title: "Flexible structure for growth",
description:
"A modular architecture that adapts as your product scales and your user base expands.",
className: "bg-success-lighter text-success",
},
];
export default function Feature4() {
return (
<div className="px-6 py-20 max-w-7xl mx-auto">
<div className="max-w-3xl text-center mx-auto mb-16">
<Text as="h2" size="4xl" className="sm:text-5xl mb-6">
A better way to design & build{" "}
<span className="text-primary">digital experiences</span>
</Text>
<Text size="base" className="text-muted max-w-xl mx-auto">
Create applications that feel intuitive and guide users through every
step with clarity, purpose, and surgical precision.
</Text>
</div>
<div className="flex flex-col lg:flex-row gap-6">
<Card className="flex-1 rounded-2xl p-6 sm:p-8 border-subtle group">
<Text as="h3" size="2xl" className="text-default mb-4">
Experience that feels natural
</Text>
<Text size="base" className="mb-6">
Every detail is crafted to help users move forward without friction.
We focus on the tiny interactions that make a product feel
"right."
</Text>
<div className="h-80 rounded-xl overflow-hidden">
<img
className="size-full object-cover transition duration-700 ease-out group-hover:scale-105 group-hover:rotate-1"
src="https://images.unsplash.com/photo-1594823274242-19036bf455e9?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="User Experience Design"
/>
</div>
</Card>
<div className="flex-1 flex flex-col gap-4">
{features.map((feature) => (
<Card
key={feature.title}
className="p-6 sm:flex-row gap-4 rounded-2xl border-subtle grow"
>
<div
className={cn(
"flex items-center justify-center size-10 rounded-lg shrink-0",
feature.className,
)}
>
<feature.icon className="size-4.5" />
</div>
<div>
<Text
as="h3"
size="lg"
fontWeight="semibold"
className="text-default mb-2"
>
{feature.title}
</Text>
<Text size="base">{feature.description}</Text>
</div>
</Card>
))}
</div>
</div>
</div>
);
}"use client";
import { Card, Text } from "@hummingbirdui/react";
import { cn } from "@hummingbirdui/react/utils";
const leftFeatures = [
{
number: "01",
title: "Visual Structure",
description:
"Intentional layouts that prioritize content and guide the eye naturally through the interface.",
},
{
number: "02",
title: "Fluid Motion",
description:
"Interactions designed with physics-based easing to feel responsive and high-end.",
},
];
const rightFeatures = [
{
number: "03",
title: "Flexible Systems",
description:
"Scalable components that adapt to your brand as it grows from startup to enterprise.",
},
{
number: "04",
title: "Deep Focus",
description:
"Minimalist aesthetics that remove cognitive load, keeping users focused on the task.",
},
];
export default function Feature5() {
return (
<div className="px-6 py-20 max-w-7xl mx-auto">
<div className="max-w-2xl mx-auto text-center mb-16">
<Text as="h2" size="4xl" className="md:text-5xl mb-8">
Everything you need to ship{" "}
<span className="text-primary">world-class</span> products.
</Text>
<Text size="lg" className="md:text-xl text-muted max-w-xl mx-auto">
A cohesive system designed to eliminate friction and elevate the
standard of your digital interactions.
</Text>
</div>
<div className="grid lg:grid-cols-12 items-center gap-16">
<div className="lg:col-span-3 space-y-16 order-2 lg:order-1">
{leftFeatures.map((feature) => (
<FeatureItem key={feature.number} {...feature} />
))}
</div>
<Card className="lg:col-span-6 order-1 lg:order-2 p-3 max-w-xl mx-auto rounded-3xl border-subtle">
<div className="aspect-4/3 rounded-2xl overflow-hidden">
<img
src="https://images.unsplash.com/photo-1558655146-d09347e92766?q=80&w=1200&auto=format&fit=crop"
className="size-full object-cover scale-105 hover:scale-100 transition-transform ease-in-out duration-700"
alt="feature"
/>
</div>
</Card>
<div className="lg:col-span-3 space-y-16 order-3 lg:text-right">
{rightFeatures.map((feature) => (
<FeatureItem key={feature.number} {...feature} reverse />
))}
</div>
</div>
</div>
);
}
function FeatureItem({
number,
title,
description,
reverse = false,
}: {
number: string;
title: string;
description: string;
reverse?: boolean;
}) {
return (
<div className="group">
<div
className={cn(
"flex items-center gap-4 mb-4",
reverse && "lg:flex-row-reverse",
)}
>
<span className="text-4xl font-black text-subtle/50 transition group-hover:text-primary/50">
{number}
</span>
<div
className={cn(
"h-px flex-1 from-primary/50 to-transparent lg:hidden",
reverse ? "bg-linear-to-l" : "bg-linear-to-r",
)}
/>
</div>
<Text
as="h4"
size="xl"
className="mb-2 group-hover:text-primary transition"
>
{title}
</Text>
<Text size="sm" className="sm:text-base text-muted">
{description}
</Text>
</div>
);
}