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

296

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

Transparent Navbar

Author:
Rajesh Maheshwari

1 year ago

2.2k
Simple web portfolio
The portfolio includes all required sections (Hero, Projects, About, Contact) with professional styling, and I've added some premium touches like social media icons, a sticky navigation, and beautiful gradient effects that make it feel cutting-edge and engaging.

Author:
Rathanak Phan

9 months ago

1.2k
Plasma
plasma

Author:
Raul antonio de la cruz hernandez

5 months ago

694
Admin portal landing page

Author:
Srreyashi DeyChakii

1 year ago

4.2k
Responsive Header
Beautiful responsive header component

Author:
Rajesh Maheshwari

1 year ago

2.2k
Basic sidebar

Author:
Rajesh Maheshwari

1 year ago

2.1k
Markert shop
wellcome tothe my online shoping

Author:
Umutoniwase Yvette

9 months ago

576
Pixel Blast
Pixel Blast

Author:
Raul antonio de la cruz hernandez

5 months ago

919
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.9k
Active Beauty Main Page

Author:
Maxim

11 months ago

1.3k
Full width header with gradient
Header component for showing Info.

Author:
TailwindFlex

3 years ago

13.5k
SomaRwanda
Menya uburyo bwo kwandika ibisomwa, impuzandimi, n'imyandikire y'icyongereza mu buryo bworoshye.

Author:
Code Master(Mfuranziza Dusabe Hamza)

9 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components