
<div class="bg-gray-100 py-2 border-b border-gray-300 text-sm ">
    <div class="container mx-auto flex justify-between">
        <div class="flex space-x-4">
            <a href="#" class="hover:text-green-600">About Us</a>
            <a href="#" class="hover:text-green-600">My Account</a>
            <a href="#" class="hover:text-green-600">Wishlist</a>
            <a href="#" class="hover:text-green-600">Order Tracking</a>
        </div>
        <div class="flex space-x-4">
            <span class="text-gray-600">100% Secure delivery without contacting the courier</span>
            <a href="#" class="hover:text-green-600">Need help? Call Us: +1800 900</a>
            <a href="#" class="hover:text-green-600">English</a>
            <a href="#" class="hover:text-green-600">USD</a>
        </div>
    </div>
</div>

<!-- Main Header -->
<header class="py-2 bg-white shadow-md">
    <div class="container mx-auto flex justify-between items-center">
        <!-- Logo -->
        <a href="#" class="text-xl font-bold text-gray-800">
            <img src="../images/logo.png" alt="ToyHub Logo" class="w-32 h-auto">
        </a>

        <!-- Search Bar -->
        <div class="flex flex-grow mx-4">
            <input type="text" placeholder="Search for items..." class="border-t border-b border-gray-300 flex-grow px-4 py-2">
            <button class="bg-green-600 text-white px-4 py-2 rounded-r-lg">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M8 6H21M8 12H21M8 18H21M3 6H3.01M3 12H3.01M3 18H3.01"></path>
                </svg>
            </button>
        </div>

        <!-- Wishlist, Cart, Account -->
        <div class="flex items-center space-x-6">
            <a href="#" class="flex items-center text-gray-800 hover:text-green-600">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M5.121 19A2.992 2.992 0 017 21c1.104 0 2.074-.53 2.666-1.337l.143-.187 1.526-2.037C12.616 16.676 13.293 16 14 16c.707 0 1.384.676 1.665 1.439l.201.377 1.465 2.004C18.03 20.468 18.994 21 20 21a3 3 0 100-6h-1.345c-.644 0-1.23-.305-1.62-.82L14 10H9l-2.956 4.93A2.992 2.992 0 005 16H3a3 3 0 000 6h1.121z"></path>
                </svg>
                <span class="ml-1">Wishlist</span>
            </a>

            <a href="#" class="flex items-center text-gray-800 hover:text-green-600">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M3 3h18l-2 10H5L3 3zM6 19a2 2 0 100 4h12a2 2 0 100-4H6z"></path>
                </svg>
                <span class="ml-1">Cart</span>
            </a>

            <a href="#" class="flex items-center text-gray-800 hover:text-green-600">
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                    xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M16 16v-1a4 4 0 00-8 0v1M6 10v1a4 4 0 008 0v-1M6 18v2a2 2 0 002 2h8a2 2 0 002-2v-2"></path>
                </svg>
                <span class="ml-1">Account</span>
            </a>
        </div>
    </div>

    <!-- Browse Categories Button -->
    <div class="container mx-auto mt-4 flex flex-row  ">
        <div class="relative inline-block text-left">
            <div class="absolute top-full left-0 w-64 bg-white shadow-lg rounded-lg mt-2 hidden">
                <div class="grid grid-cols-2 gap-4 p-4">
                    <a href="#" class="text-gray-700 hover:text-gray-900">Home</a>
                    <a href="#" class="text-gray-700 hover:text-gray-900">About Us</a>
                    <a href="#" class="text-gray-700 hover:text-gray-900">Contact</a>
                    <a href="#" class="text-gray-700 hover:text-gray-900">Best Seller</a>
                    <a href="#" class="text-gray-700 hover:text-gray-900">Todays Deals</a>
                </div>
            </div>
        </div>
        <div class="flex justify-evenly w-screen">
            <a href="#" class="text-gray-700 hover:text-gray-900">Home</a>
            <a href="#" class="text-gray-700 hover:text-gray-900">About Us</a>
            <a href="#" class="text-gray-700 hover:text-gray-900">Contact</a>
            <a href="#" class="text-gray-700 hover:text-gray-900">Best Seller</a>
            <a href="#" class="text-gray-700 hover:text-gray-900">Todays Deals</a>
        </div>
    </div>
</header>