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 v3.4. It is responsive.

Header

Author Raul antonio de la cruz hernandez

Tailwind v3.4 693 6

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

Basic sidebar

Rajesh Maheshwari

1 year ago

2.8k
Stars: Sun and Moon Illustrations
I Created Sun and Moon Illustrations with Tailwind CSS, Embracing Light and Dark Modes

$$@(\/)(\/)¥$ $@(\/)(\/)¥

2 years ago

5.1k
my website

Creative Solution

2 years ago

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

Junclarkaizen Pagu

3 years ago

12.3k
Navbar
E-commerce Navbar

Aman kumar

2 years ago

5.6k
Africa Solex Ltd
Description (ibisobanuro bya website) ni text ngufi isobanura neza icyo urubuga cyangwa sosiyete yawe ikora, ikaba ifasha no mu byerekeye SEO (Search Engine Optimization). Mu nyandiko za HTML, description ishyirwa muri meta tag muri <head>.

Ele Eriksen

1 year 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.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.7k
Dark mode sidenav with collapsible menu

Rajesh Maheshwari

1 year ago

2k
Responsive NavBar Using CSS Only
A complete responsive navbar only using tailwind css

Shivam Vishwakarma

1 year ago

1.2k
No one
nice

Umutoniwase Yvette

1 year ago

1k
home page
Hero Section: Gradient background with noise texture Animated floating image Gradient text effect Call-to-action buttons Features Section: Three feature cards with gradient headers Hover animations Clean iconography Stats Display: Full-width gradient background Clean stat presentation Testimonials: Three testimonial cards with user avatars Star ratings Border accents Hover scaling effects Call-to-Action (CTA) Section: Gradient background Centered content Multiple action buttons Footer: Four-column layout Social media icons Newsletter signup Copyright information Design Features: Vibrant gradient color scheme Smooth hover animations and transitions Responsive layout for all screen sizes Modern typography Subtle floating animations Clean, card-based design

ishimwe prince

1 year ago

1.4k
Enhanced Modern Navbar
The navbar now feels premium and modern while maintaining all original functionality. The glassmorphism effect, smooth animations, and professional styling create a cutting-edge user experience that would fit perfectly on any modern website!

Rathanak Phan

1 year ago

1.5k