Hero Section
Component
Stunning Tailwind hero section components and Tailwind CSS hero banners redesigned with premium Apple-level aesthetics and dynamic interactions.
The hero section is the first thing your users see. Make an instant impact with these premium Tailwind hero section templates. From ultra-minimalist typography layouts to vibrant, gradient-driven Tailwind CSS hero banners, these components are designed to elevate your landing page conversions.
Complement your hero section with a floating Banner or optimized call-to-action Buttons.
Center Content Hero Section
import React from "react";
import { ChevronRight, Sparkles } from "lucide-react";
const CenterContentHeroSection = () => (
<section className="bg-white dark:bg-neutral-950 text-neutral-900 dark:text-white min-h-[90vh] flex flex-col items-center justify-center px-6 py-24 relative overflow-hidden">
{/* Subtle Glow Background */}
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[800px] h-[400px] bg-neutral-100 dark:bg-white/5 blur-[120px] rounded-full opacity-60 pointer-events-none"></div>
<div className="max-w-4xl w-full text-center relative z-10 flex flex-col items-center">
<div className="mb-8 inline-flex items-center gap-2 px-3 py-1 rounded-full bg-neutral-100 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 text-[13px] font-medium text-neutral-600 dark:text-neutral-300 shadow-sm">
<Sparkles className="w-4 h-4 text-neutral-500 dark:text-neutral-400" />
<span>Introducing the new UI framework</span>
</div>
<h1 className="text-6xl sm:text-7xl md:text-8xl font-semibold mb-8 leading-[1.05] tracking-tighter text-neutral-900 dark:text-white">
Design at the <br className="hidden sm:block" />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-neutral-900 to-neutral-500 dark:from-white dark:to-neutral-500">
speed of thought.
</span>
</h1>
<p className="text-xl sm:text-2xl mb-12 text-neutral-500 dark:text-neutral-400 max-w-2xl mx-auto font-normal leading-relaxed tracking-tight">
A beautifully crafted, minimalist component library designed to help you build interfaces that look and feel entirely premium.
</p>
<div className="flex flex-col sm:flex-row items-center gap-4">
<a
href="#"
className="w-full sm:w-auto inline-flex items-center justify-center px-8 py-4 text-[15px] font-medium text-white bg-neutral-900 dark:bg-white dark:text-neutral-900 rounded-full hover:scale-105 hover:bg-neutral-800 dark:hover:bg-neutral-100 transition-all duration-300 ease-out shadow-lg shadow-neutral-900/10 dark:shadow-white/10"
>
Explore Components
</a>
<a
href="#"
className="w-full sm:w-auto inline-flex items-center justify-center px-8 py-4 text-[15px] font-medium text-neutral-700 dark:text-neutral-300 bg-transparent rounded-full hover:bg-neutral-100 dark:hover:bg-neutral-900 transition-colors duration-300 group"
>
View Documentation
<ChevronRight className="w-4 h-4 ml-1 transition-transform group-hover:translate-x-1" />
</a>
</div>
<div className="mt-24 w-full grid grid-cols-2 md:grid-cols-4 gap-8 pt-12 border-t border-neutral-100 dark:border-neutral-900">
{[
{ label: "Components", value: "150+" },
{ label: "Designers", value: "20K+" },
{ label: "Downloads", value: "1M+" },
{ label: "Rating", value: "4.9/5" },
].map((stat, index) => (
<div key={index} className="flex flex-col items-center justify-center">
<span className="text-3xl md:text-4xl font-semibold tracking-tight text-neutral-900 dark:text-white mb-2">{stat.value}</span>
<span className="text-[13px] font-medium text-neutral-500 dark:text-neutral-400 uppercase tracking-wider">{stat.label}</span>
</div>
))}
</div>
</div>
</section>
);
export default CenterContentHeroSection;
Soft Gradient Hero Section
import React from "react";
import { ArrowRight, Play } from "lucide-react";
const GradientHeroSection = () => (
<section className="bg-[#fafafa] dark:bg-[#0a0a0a] min-h-[90vh] flex flex-col items-center justify-center px-6 py-24 relative overflow-hidden">
{/* Colorful Orbs */}
<div className="absolute top-0 right-0 w-[500px] h-[500px] bg-blue-400/20 dark:bg-blue-600/20 rounded-full blur-[100px] -translate-y-1/2 translate-x-1/3 pointer-events-none"></div>
<div className="absolute bottom-0 left-0 w-[600px] h-[600px] bg-purple-400/20 dark:bg-purple-600/20 rounded-full blur-[120px] translate-y-1/3 -translate-x-1/3 pointer-events-none"></div>
<div className="max-w-3xl w-full text-center relative z-10 flex flex-col items-center">
<h1 className="text-5xl md:text-7xl font-semibold mb-6 tracking-tighter text-neutral-900 dark:text-white leading-tight">
Build faster with intelligent tools.
</h1>
<p className="text-lg md:text-xl text-neutral-600 dark:text-neutral-400 mb-10 max-w-xl font-normal leading-relaxed">
Everything you need to launch your next idea. Beautifully designed, perfectly optimized, and ready for production.
</p>
<div className="flex items-center gap-3">
<div className="relative group">
<div className="absolute -inset-1 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full blur opacity-25 group-hover:opacity-50 transition duration-500"></div>
<button className="relative px-8 py-3.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 text-[14px] font-semibold rounded-full flex items-center gap-2 transition-transform hover:scale-[1.02]">
Get API Keys <ArrowRight className="w-4 h-4" />
</button>
</div>
<button className="px-8 py-3.5 bg-white dark:bg-neutral-900 text-neutral-900 dark:text-white border border-neutral-200 dark:border-neutral-800 text-[14px] font-semibold rounded-full flex items-center gap-2 hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors shadow-sm">
<Play className="w-4 h-4 fill-current" /> Watch Demo
</button>
</div>
<div className="mt-16 w-full max-w-2xl h-64 md:h-80 bg-white/50 dark:bg-black/50 backdrop-blur-xl rounded-2xl border border-neutral-200/50 dark:border-white/10 shadow-2xl flex items-center justify-center relative overflow-hidden">
<div className="absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-neutral-300 dark:via-white/20 to-transparent"></div>
<p className="text-neutral-400 dark:text-neutral-500 text-sm font-medium">✨ UI Preview Placeholder</p>
</div>
</div>
</section>
);
export default GradientHeroSection;
Ultra Minimal Typography Hero
import React from "react";
import { ArrowRight } from "lucide-react";
const MinimalTypographyHero = () => (
<section className="bg-white dark:bg-neutral-950 min-h-[85vh] flex flex-col justify-center px-6 md:px-12 lg:px-24 py-20 relative">
<div className="max-w-5xl relative z-10 space-y-8">
<h1 className="text-6xl sm:text-7xl md:text-9xl font-medium tracking-tighter text-neutral-900 dark:text-white leading-[0.9]">
Simplicity is <br />
<span className="text-neutral-400 dark:text-neutral-600">the ultimate</span> <br />
sophistication.
</h1>
<div className="flex flex-col sm:flex-row sm:items-end justify-between gap-8 pt-12 md:pt-24">
<p className="text-lg md:text-xl text-neutral-500 dark:text-neutral-400 max-w-md font-normal leading-relaxed">
Create timeless digital experiences with a framework that removes the noise and focuses entirely on the essence of your content.
</p>
<a
href="#"
className="group inline-flex items-center text-[15px] font-semibold text-neutral-900 dark:text-white uppercase tracking-wider pb-1 border-b-2 border-neutral-900 dark:border-white transition-all hover:pr-4"
>
Discover our vision
<ArrowRight className="w-4 h-4 ml-2 opacity-0 -translate-x-4 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-300 absolute right-0" />
</a>
</div>
</div>
</section>
);
export default MinimalTypographyHero;
Split Side-Image Hero
import React from "react";
import { Play } from "lucide-react";
const SideImageHeroSection = () => (
<section className="bg-white dark:bg-neutral-950 min-h-screen flex items-center px-6 py-24 relative overflow-hidden">
<div className="container mx-auto max-w-7xl">
<div className="grid lg:grid-cols-2 gap-16 lg:gap-8 items-center">
{/* Text Content */}
<div className="max-w-2xl space-y-8 relative z-10">
<div className="inline-block">
<span className="bg-neutral-100 dark:bg-neutral-900 text-neutral-900 dark:text-white text-[12px] font-bold uppercase tracking-widest px-3 py-1.5 rounded">
v2.0 Now Available
</span>
</div>
<h1 className="text-5xl sm:text-6xl md:text-7xl font-semibold tracking-tighter text-neutral-900 dark:text-white leading-[1.1]">
Empower your creative process.
</h1>
<p className="text-lg md:text-xl text-neutral-500 dark:text-neutral-400 font-normal leading-relaxed">
Eliminate friction between design and engineering. Build scalable systems that adapt to your brand perfectly right out of the box.
</p>
<div className="flex flex-col sm:flex-row gap-4 pt-4">
<button className="px-8 py-3.5 bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 text-[15px] font-medium rounded-xl hover:bg-neutral-800 dark:hover:bg-neutral-100 transition-colors shadow-xl shadow-neutral-900/10 dark:shadow-white/10 text-center">
Start Building
</button>
<button className="px-8 py-3.5 bg-white dark:bg-neutral-950 text-neutral-900 dark:text-white border border-neutral-200 dark:border-neutral-800 text-[15px] font-medium rounded-xl hover:bg-neutral-50 dark:hover:bg-neutral-900 transition-colors text-center">
Read the Docs
</button>
</div>
</div>
{/* Abstract Image/Art Container */}
<div className="relative w-full h-[500px] lg:h-[600px] bg-neutral-100 dark:bg-neutral-900 rounded-3xl overflow-hidden border border-neutral-200/50 dark:border-white/5 shadow-2xl group">
{/* Subtle grid pattern inside */}
<div className="absolute inset-0 opacity-[0.03] dark:opacity-[0.05]" style={{ backgroundImage: "radial-gradient(#000 1px, transparent 1px)", backgroundSize: "24px 24px" }}></div>
{/* Decorative floating elements simulating an interface or 3D scene */}
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-64 h-64 bg-white dark:bg-neutral-800 rounded-full blur-3xl opacity-50 group-hover:scale-110 transition-transform duration-1000"></div>
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-64 bg-white/40 dark:bg-white/10 backdrop-blur-md rounded-2xl border border-white/40 dark:border-white/20 shadow-xl rotate-12 group-hover:rotate-6 transition-transform duration-700 ease-out"></div>
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-48 h-64 bg-white/60 dark:bg-white/10 backdrop-blur-md rounded-2xl border border-white/50 dark:border-white/20 shadow-xl -rotate-6 group-hover:rotate-0 transition-transform duration-700 ease-out flex items-center justify-center">
<div className="w-12 h-12 rounded-full border border-neutral-200 dark:border-white/20 p-2 flex items-center justify-center">
<Play className="w-4 h-4 text-neutral-900 dark:text-white pl-0.5" />
</div>
</div>
</div>
</div>
</div>
</section>
);
export default SideImageHeroSection;