Search Integrated Navbar

<div class="max-w-7xl mx-auto px-6 py-4 flex items-center gap-10 bg-white">
        <div class="text-xl font-bold">Commerce.</div>
        <div class="flex-1 max-w-xl relative">
            <input type="text" placeholder="Search products..."
                class="w-full bg-slate-100 rounded-full py-2.5 px-6 focus:outline-none focus:ring-2 focus:ring-indigo-500">
            <span class="absolute right-4 top-2.5 text-slate-400">⌘K</span>
        </div>
        <div class="flex items-center gap-6">
            <div class="relative">
                <svg class="w-6 h-6 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" stroke-width="2"></path>
                </svg>
                <span
                    class="absolute -top-1 -right-1 bg-red-500 text-white text-[10px] w-4 h-4 rounded-full flex items-center justify-center">2</span>
            </div>
            <div class="w-8 h-8 rounded-full bg-slate-200"></div>
        </div>
    </div>
    <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>