Home
Alif Bima Pradana
Intelligent AI tools built to help.

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

Header Avatar Hero

Author Alif Bima Pradana

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