Componentes de mejora de la navegación

<nav class="bg-gray-900 text-white p-4 dark:bg-gray-800">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-xl font-bold hover:text-yellow-400 dark:hover:text-yellow-300">ShopRetro</a>
            <ul class="hidden md:flex space-x-4">
                <li><a href="#" class="hover:text-yellow-400 dark:hover:text-yellow-300">Home</a></li>
                <li><a href="#" class="hover:text-yellow-400 dark:hover:text-yellow-300">Products</a></li>
                <li><a href="#" class="hover:text-yellow-400 dark:hover:text-yellow-300">About Us</a></li>
                <li><a href="#" class="hover:text-yellow-400 dark:hover:text-yellow-300">Contact</a></li>
            </ul>
        </div>
        <div class="flex items-center space-x-4">
            <input type="text" placeholder="Search..." class="bg-gray-700 text-white rounded-lg p-2 dark:bg-gray-600" />
            <a href="#" class="relative">
                <img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border border-yellow-400 dark:border-yellow-300" />
                <span class="absolute top-0 right-0 bg-yellow-500 rounded-full h-3 w-3 dark:bg-yellow-300"></span>
            </a>
            <button class="bg-yellow-500 text-gray-900 hover:bg-yellow-400 dark:bg-yellow-400 dark:text-gray-900 dark:hover:bg-yellow-300 rounded-lg p-2">Cart</button>
        </div>
    </div>
    <div class="bg-yellow-500 p-4 dark:bg-yellow-400">
        <div class="container mx-auto flex justify-between items-center">
            <p class="text-gray-900 dark:text-gray-800">Free Shipping on orders over $50</p>
            <a href="#" class="bg-gray-900 text-white hover:bg-gray-800 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-lg p-2">Shop Now</a>
        </div>
    </div>
</nav>

<main class="bg-gray-100 dark:bg-gray-900 min-h-screen p-8">
    <div class="container mx-auto flex flex-wrap">
        <div class="w-full md:w-1/3 p-4">
            <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4">
                <img src="https://picsum.photos/300/200" alt="Product Image" class="rounded-lg mb-4">
                <h2 class="text-lg font-bold mb-2">Product Title</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a great product that you will love.</p>
                <p class="font-bold mt-2">$19.99</p>
                <button class="mt-4 bg-yellow-500 text-gray-900 hover:bg-yellow-400 dark:bg-yellow-400 dark:hover:bg-yellow-300 rounded-lg p-2">Add to Cart</button>
            </div>
        </div>
        <div class="w-full md:w-1/3 p-4">
            <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4">
                <img src="https://picsum.photos/300/201" alt="Product Image" class="rounded-lg mb-4">
                <h2 class="text-lg font-bold mb-2">Product Title</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a great product that you will love.</p>
                <p class="font-bold mt-2">$29.99</p>
                <button class="mt-4 bg-yellow-500 text-gray-900 hover:bg-yellow-400 dark:bg-yellow-400 dark:hover:bg-yellow-300 rounded-lg p-2">Add to Cart</button>
            </div>
        </div>
        <div class="w-full md:w-1/3 p-4">
            <div class="bg-white dark:bg-gray-700 rounded-lg shadow-lg p-4">
                <img src="https://picsum.photos/300/202" alt="Product Image" class="rounded-lg mb-4">
                <h2 class="text-lg font-bold mb-2">Product Title</h2>
                <p class="text-gray-700 dark:text-gray-300">This is a great product that you will love.</p>
                <p class="font-bold mt-2">$39.99</p>
                <button class="mt-4 bg-yellow-500 text-gray-900 hover:bg-yellow-400 dark:bg-yellow-400 dark:hover:bg-yellow-300 rounded-lg p-2">Add to Cart</button>
            </div>
        </div>
    </div>
</main>