VibeCoderzVibeCoderz
Telegram
All Prompts
Sticky Dark Navbar with Logo & Hamburger Menu preview
headernavbarnavigationtailwindresponsivestickydarkmobile-menu

Sticky Dark Navbar with Logo & Hamburger Menu

Тёмная адаптивная sticky navbar с логотипом и бургер-меню. Идеально для SaaS, лендингов и веб-приложений. Создана на Tailwind CSS.

Prompt

<header class="sticky top-0 z-30 bg-zinc-950/90 border-zinc-800 border-b backdrop-blur w-full text-white max-w-5xl">
        <div class="max-w-7xl mx-auto px-4 sm:px-6">
            <div class="flex items-center justify-between h-16">
                <div class="flex items-center gap-2">
                    <svg class="md:w-14 md:h-14 w-[36px] h-[36px]" viewBox="0 0 48 48" aria-hidden="true" stroke-width="2" style="width: 36px; height: 36px;">
<path d="M24 8 L40 36 H8 Z" fill="currentColor" class=""></path>
</svg>
                    <span class="text-xl font-medium tracking-tight font-geist" style="">FlowAI</span>
                </div>
                <nav class="hidden md:flex items-center gap-8 text-sm">
                    <a href="#" class="text-zinc-400 hover:text-zinc-100 font-normal font-geist" style="">Workflows</a>
                    <a href="#" class="text-zinc-400 hover:text-zinc-100 font-normal font-geist" style="">Apps <span class="ml-1 text-xs text-zinc-600 font-geist" style="">12</span></a>
                    <a href="#" class="text-zinc-400 hover:text-zinc-100 font-normal font-geist" style="">Analytics</a>
                    <a href="#" class="text-zinc-400 hover:text-zinc-100 font-normal font-geist" style="">Support</a>
                </nav>
                <button class="md:hidden inline-flex h-9 w-9 items-center justify-center rounded-lg border border-zinc-800 bg-zinc-900 text-zinc-300">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" data-lucide="menu" class="lucide lucide-menu h-4 w-4"><path d="M4 12h16"></path><path d="M4 18h16"></path><path d="M4 6h16"></path></svg>
                </button>
            </div>
        </div>
    </header>
All Prompts