Hero Section

Hero section design concept

This tailwind example is contributed by Raul antonio de la cruz hernandez, on 27-Nov-2025. Component is made with Tailwind CSS v3. It is responsive.

Header

Author Raul antonio de la cruz hernandez

228

Fork Fullscreen

<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full max-w-3xl h-full opacity-30 pointer-events-none z-0">
            <div class="absolute inset-0 bg-gradient-to-b from-violet-600 via-purple-900/20 to-transparent blur-[100px]"></div>
        </div>

<div class="absolute inset-0 opacity-[0.03] z-0 pointer-events-none mix-blend-overlay"
             style="background-image: url('data:image/svg+xml,%3Csvg viewBox=%220 0 200 200%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cfilter id=%22noiseFilter%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.65%22 numOctaves=%223%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23noiseFilter)%22/%3E%3C/svg%3E');">
        </div>

<nav class="relative z-10 w-full px-6 py-6 flex justify-between items-center max-w-7xl mx-auto">
            <div class="text-xl font-bold tracking-wide">Mist</div>

<div class="hidden md:flex space-x-8 text-sm text-gray-400 font-medium">
                <a href="#" class="hover:text-purple-300 transition-colors">Problem</a>
                <a href="#" class="hover:text-purple-300 transition-colors">How it adapts</a>
                <a href="#" class="hover:text-purple-300 transition-colors">Everyday motion</a>
                <a href="#" class="hover:text-purple-300 transition-colors">Testimonials</a>
                <a href="#" class="hover:text-purple-300 transition-colors">Pricing</a>
            </div>

<main class="relative z-10 max-w-7xl mx-auto px-6 pt-20 pb-12 flex flex-col justify-between h-[calc(100vh-100px)]">

<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-start mt-10">

<div>
                    <h1 class="text-6xl md:text-7xl lg:text-8xl font-medium tracking-tighter leading-[0.95]">
                        Tech that listens <br />
                        <span class="text-gray-400">before it acts.</span>
                    </h1>
                </div>

<div class="lg:pl-10 flex flex-col justify-center h-full pt-4">
                    <p class="text-xl text-gray-400 max-w-md leading-relaxed">
                        We build adaptive systems that learn from context — calm, precise, and deeply human in how they respond. No friction. No noise. Just flow between thought and interface.
                    </p>

<div class="flex flex-wrap gap-4 mt-8">
                        <button class="px-6 py-3 rounded-full border border-gray-600 text-gray-300 hover:bg-gray-800 hover:border-gray-500 transition-all">
                            See how it works
                        </button>
                        <button class="px-6 py-3 rounded-full bg-purple-200 text-purple-950 font-semibold hover:bg-white hover:shadow-[0_0_20px_rgba(168,85,247,0.5)] transition-all">
                            Start for Free
                        </button>
                    </div>
                </div>
            </div>

<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-end mt-auto">

<div class="font-mono text-xs text-purple-300/60 space-y-1 p-4 rounded-lg bg-purple-900/10 border border-purple-500/10 backdrop-blur-sm max-w-sm">
                    <p>Context loading</p>
                    <p>Calendar context loaded</p>
                    <p>Reading focus patterns</p>
                    <p>Noise signals filtered</p>
                    <br>
                    <p class="text-purple-200">> I see two free blocks between 2-5 PM.</p>
                    <p class="text-purple-200">> You tend to focus best at 14:40 -</p>
                    <p class="text-purple-200">> want me to reserve a deep-work slot?</p>
                    <br>
                    <p class="opacity-70">Also: one missed message</p>
                    <p class="opacity-70 blur-[2px]">from Sarah - need a quick summary?</p>
                </div>

<div class="flex justify-start md:justify-end space-x-12 md:space-x-16">
                    <div>
                        <div class="text-4xl md:text-5xl font-light text-white mb-1">2,500+</div>
                        <div class="text-xs tracking-widest text-gray-500 uppercase font-medium">Active Users</div>
                    </div>
                    <div>
                        <div class="text-4xl md:text-5xl font-light text-white mb-1">98%</div>
                        <div class="text-xs tracking-widest text-gray-500 uppercase font-medium">Retention Rate</div>
                    </div>
                    <div>
                        <div class="text-4xl md:text-5xl font-light text-white mb-1">1.2M</div>
                        <div class="text-xs tracking-widest text-gray-500 uppercase font-medium">Contextual Data<br>Points</div>
                    </div>
                </div>

</div>
        </main>

</div>

Related Examples

Coffee
custom

Author:
Rebecca IRANKUNDA

8 months ago

548
Yoga Coach Hero Section

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

5.8k
Transparent Navbar

Author:
Rajesh Maheshwari

11 months ago

2k
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Author:
Nicole Shalom

8 months ago

1.2k
Responsive Tailwind CSS Header with Navigation & Buttons | Ready to Use
A fully responsive and modern header built with Tailwind CSS. Features a sleek navigation menu, login/register buttons, and adaptive design for all screen sizes. Open-source and easy to integrate into any web project!

Author:
Abdul Baset Bappy

10 months ago

2.1k
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Author:
Junclarkaizen Pagu

2 years ago

11.8k
Header + simple Hero Section

Author:
ABDO-SY

11 months ago

2.1k
Animated navigation with Tailwind CSS and Apinejs

Author:
Michael Andreuzza

1 year ago

5.1k
vanessa
nice

Author:
Umutoniwase Yvette

8 months ago

606
yvette
vibes kbx

Author:
Umutoniwase Yvette

8 months ago

646
Creative Hero Section

Author:
Ijila Itunu

9 months ago

1.3k
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components