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 761 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

Markert shop
wellcome tothe my online shoping

Umutoniwase Yvette

1 year ago

1.2k
Title

Morris Muriuki Muthigani

1 year ago

1.5k
Modern Retail Analytics Dashboard UI with Interactive Charts
Dashboard built with HTML, Tailwind CSS, and vanilla JavaScript.

JUGENDRA GANGWAR

3 months ago

367
Dark mode sidenav with collapsible menu

Rajesh Maheshwari

1 year ago

2k
my website

Creative Solution

2 years ago

3.3k
ACODE MASTER — Cyberpunk Full Stack Developer from Rwanda
"I’m ACODE MASTER — a visionary Full Stack Developer from Rwanda, blending cutting-edge tech with bold design. I specialize in building modern web applications using React, Node.js, and TailwindCSS, inspired by the cyberpunk aesthetic and driven by a passion for digital innovation. Welcome to the future of code."

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.9k
SaaS Dashboard Navbar with Search, Notifications & Slide-In Mobile Menu
SaaS dashboard navbar built with pure HTML and Tailwind CSS.

JUGENDRA GANGWAR

4 months ago

284
Fashion Landing Page with Hero Slider, GSAP Animations
fashion/eCommerce landing page built using HTML, CSS, GSAP, Swiper.js, and Lenis Smooth Scroll.

JUGENDRA GANGWAR

4 months ago

412
Basic sidebar

Rajesh Maheshwari

1 year ago

2.9k
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.6k
Hero Section
Home hero section search bar

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

2 years ago

8.5k
Yvette
it's very good

Umutoniwase Yvette

1 year ago

1.5k