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

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

Home page
Home page для ПО, страница для входа в приложение.

Author:
Алла Телегина

9 months ago

1.1k
Software Developer
A software developer designs, builds, tests, and maintains software applications and systems. They use programming languages to create code that meets user needs and client specifications. Software developers may work on various projects, including applications, systems software, or web development

Author:
nii fanny

5 months ago

913
Book
nice kbx

Author:
Umutoniwase Yvette

6 months ago

384
Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

1 year ago

7.8k
Active Beauty Main Page

Author:
Maxim

8 months ago

1k
Header

Author:
Morris Muriuki Muthigani

4 months ago

494
Brutalist Hero

Author:
threehymns

11 months ago

2.3k
Production-Ready Responsive Navigation
This is a sample content area. Scroll down to see the fixed header in action.

Author:
zobaidul kaziex

1 year ago

3.4k
Creative Hero Section

Author:
Ijila Itunu

6 months ago

1.1k
Admin portal landing page

Author:
Srreyashi DeyChakii

1 year ago

3.7k
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

Author:
AKASH GANDHAR

1 year ago

4.8k
navigation header
responsive navigation header

Author:
Abid Ullah

1 year ago

2.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components