Centered Links Navbar

Live Preview
<nav class="flex items-center justify-between px-10 py-6 bg-white border-b border-slate-100">
        <div class="flex-1">
            <div class="text-xl font-bold tracking-tighter">STUDIO.</div>
        </div>
        <div class="hidden md:flex items-center gap-10 text-xs font-bold uppercase tracking-widest text-slate-500">
            <a href="#" class="hover:text-black transition-colors">Work</a>
            <a href="#" class="hover:text-black transition-colors">Team</a>
            <a href="#" class="hover:text-black transition-colors">Process</a>
            <a href="#" class="hover:text-black transition-colors">Journal</a>
        </div>
        <div class="flex-1 flex justify-end">
            <button
                class="bg-black text-white px-6 py-2 rounded-full text-xs font-bold hover:bg-slate-800 transition-all active:scale-95">Say
                Hello</button>
        </div>
    </nav>

Related components

More items from the merged UI library.

View all