navbar
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>