<header class="bg-white shadow-sm px-4" x-data="{ open: false }">
        <nav class="container mx-auto">
            <div class="flex justify-between items-center h-20">
                <div class="flex items-center space-x-2">
                    <div class="w-8 h-8 bg-gray-600 rounded"></div>
                    <span class="font-bold text-xl">Brand Logo</span>
                </div>
                <div class="hidden md:flex items-center space-x-10">
                    <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-900">Solutions</a>
                    <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-900">Resources</a>
                    <a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-900">Company</a>
                </div>
                <button @click="open = !open" class="md:hidden text-gray-700">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h16M4 16h16">
                        </path>
                    </svg>
                </button>
            </div>
            <div x-show="open" x-transition="" class="md:hidden border-t pb-4 pt-2" style="display: none;">
                <a href="#" class="block py-2 text-sm text-gray-600">Solutions</a>
                <a href="#" class="block py-2 text-sm text-gray-600">Resources</a>
                <a href="#" class="block py-2 text-sm text-gray-600">Company</a>
            </div>
        </nav>
    </header>