Startup Minimal Navbar

Live Preview
<nav class="max-w-5xl mx-auto flex items-center justify-between px-6 py-6 bg-white">
        <div class="w-10 h-10 bg-indigo-600 rounded-lg"></div>
        <div class="flex items-center gap-8 text-slate-500 font-medium">
            <a href="#" class="hover:text-black">Showcase</a>
            <a href="#" class="hover:text-black">Template</a>
            <a href="#" class="hover:text-black">Jobs</a>
        </div>
        <button class="bg-slate-950 text-white px-5 py-2 rounded-lg text-sm font-medium">Post a Job</button>
    </nav>
    <script>
        document.querySelectorAll('button').forEach(btn => {
            btn.addEventListener('mousedown', function () { this.classList.add('scale-95'); });
            btn.addEventListener('mouseup', function () { this.classList.remove('scale-95'); });
        });
    </script>

Related components

More items from the merged UI library.

View all