Intelligent AI tools built to help.

Unlock smarter workflows with AI tools designed to boost productivity, simplify tasks and help you do more with less effort.

This tailwind example is contributed by Alif Bima Pradana, on 07-Feb-2026. Component is made with Tailwind v3.4. It is responsive.

Header Avatar Hero

Author Alif Bima Pradana

Tailwind v3.4 613 2

Fork Fullscreen

* {
        font-family: 'Poppins', sans-serif;
    }
</style>

<div class="hidden md:flex items-center gap-8 transition duration-500">
        <a href="/" class="hover:text-slate-500 transition">
            Home
        </a>
        <a href="/products" class="hover:text-slate-500 transition">
            Products
        </a>
        <a href="/stories" class="hover:text-slate-500 transition">
            Stories
        </a>
        <a href="/pricing" class="hover:text-slate-500 transition">
            Pricing
        </a>
    </div>

<button class="hidden md:block px-6 py-2.5 text-white bg-indigo-600 hover:bg-indigo-700 active:scale-95 transition-all rounded-full">
        Contact us
    </button>
    <button id="open-menu" class="md:hidden active:scale-90 transition">
        <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu-icon lucide-menu"><path d="M4 5h16"/><path d="M4 12h16"/><path d="M4 19h16"/></svg>
    </button>
</nav>
<div id="mobile-navLinks" class="fixed inset-0 z-[100] bg-white/60 text-slate-800 backdrop-blur flex flex-col items-center justify-center text-lg gap-8 md:hidden transition-transform duration-300 -translate-x-full">
    <a href="/">
        Home
    </a>
    <a href="/products">
        Products
    </a>
    <a href="/stories">
        Stories
    </a>
    <a href="/pricing">
        Pricing
    </a>
    <button id="close-menu" class="active:ring-3 active:ring-white aspect-square size-10 p-1 items-center justify-center bg-white hover:bg-slate-200 transition text-black rounded-md flex">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
    </button>
</div>

<section class="flex flex-col max-md:gap-20 md:flex-row pb-20 items-center justify-between mt-20 px-4 md:px-16 lg:px-24 xl:px-32">
    <div class="flex flex-col items-center md:items-start">
        <div class="flex flex-wrap items-center justify-center p-1.5 rounded-full border border-slate-400 text-gray-500 text-xs">
            <div class="flex items-center">
                <img class="size-7 rounded-full border-3 border-white"
                    src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?q=80&w=50" alt="userImage1">
                <img class="size-7 rounded-full border-3 border-white -translate-x-2"
                    src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=50" alt="userImage2">
                <img class="size-7 rounded-full border-3 border-white -translate-x-4"
                    src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?q=80&w=50&h=50&auto=format&fit=crop"
                    alt="userImage3">
            </div>
            <p class="-translate-x-2">Join community of 1m+ founders </p>
        </div>
        <h1 class="text-center md:text-left text-5xl leading-[68px] md:text-6xl md:leading-[84px] font-medium max-w-xl text-slate-900">
            Intelligent AI tools built to help.
        </h1>
        <p class="text-center md:text-left text-sm text-slate-700 max-w-lg mt-2">
            Unlock smarter workflows with AI tools designed to boost productivity, simplify tasks and help you do more with less effort.
        </p>
        <div class="flex items-center gap-4 mt-8 text-sm">
            <button class="bg-indigo-600 hover:bg-indigo-700 text-white active:scale-95 rounded-md px-7 h-11">
                Get started
            </button>
            <button class="flex items-center gap-2 border border-slate-600 active:scale-95 hover:bg-white/10 transition text-slate-600 rounded-md px-6 h-11">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-video-icon lucide-video"><path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"/><rect x="2" y="6" width="14" height="12" rx="2"/></svg>
                <span>Watch demo</span>
            </button>
        </div>
    </div>
    <img src="https://raw.githubusercontent.com/prebuiltui/prebuiltui/main/assets/hero/hero-section-showcase-4.png" alt="hero" class="max-w-xs sm:max-w-sm lg:max-w-md transition-all duration-300">
</section>

const openMenuHandler = () => {
        navLinks.classList.remove("-translate-x-full")
        navLinks.classList.add("translate-x-0")
    }

const closeMenuHandler = () => {
        navLinks.classList.remove("translate-x-0")
        navLinks.classList.add("-translate-x-full")
    }

openMenu.addEventListener("click", openMenuHandler);
    closeMenu.addEventListener("click", closeMenuHandler);
</script>

Related Examples

Hero section
Hero section for your project

Prajwal Hallale

4 years ago

9.2k
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.2k
Hero

Aman kumar

2 years ago

7.7k
Hero Section
Home hero section search bar

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

2 years ago

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

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

2 years ago

5k
Yoga Coach Hero Section

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

2 years ago

6.7k
Portfolio Hero Section 1
visually stunning and captivating hero section component for your portfolio website.

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

2 years ago

6.4k
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

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

2 years ago

9.7k
Tailwind Hero Section
Fully Responsive Hero Section with Navbar

AKASH GANDHAR

2 years ago

5.4k
Tailwind Pricing Section
Fully Responsive Pricing Section

AKASH GANDHAR

2 years ago

2.3k
Tailwind Pricing Section 2
Fully Responsive Pricing Section

AKASH GANDHAR

2 years ago

2.8k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

ABDESLAMI ACHRAF

2 years ago

4.6k