Dual Level Navbar

Live Preview
<div
        class="bg-slate-900 py-2 px-10 flex justify-between items-center text-[10px] text-slate-400 font-bold uppercase tracking-widest">
        <div>Free shipping on orders over $150</div>
        <div class="flex gap-6"><a href="#" class="hover:text-white transition-colors">Support</a> <a href="#"
                class="hover:text-white transition-colors">Track Order</a></div>
    </div>
    <div class="px-10 py-6 flex justify-between items-center bg-white border-b border-slate-100">
        <div class="text-2xl font-black italic tracking-tighter">MOTO.</div>
        <div class="flex gap-8 font-bold text-sm text-slate-600">
            <a href="#" class="hover:text-black transition-colors">Shop</a>
            <a href="#" class="hover:text-black transition-colors">Racing</a>
            <a href="#" class="hover:text-black transition-colors">Community</a>
        </div>
        <div class="flex items-center gap-4">
            <div
                class="w-8 h-8 bg-slate-100 rounded-full flex items-center justify-center cursor-pointer hover:bg-slate-200 transition-all">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
                </svg>
            </div>
            <div class="w-8 h-8 bg-slate-900 rounded-full cursor-pointer"></div>
        </div>
    </div>

Related components

More items from the merged UI library.

View all