粘性导航组件

<nav class="bg-gray-800 dark:bg-gray-900 shadow-lg py-4 fixed w-full z-10">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <img src="https://picsum.photos/50" alt="Logo" class="h-10 rounded-lg" />
            <h1 class="text-lg text-white font-bold">ShopEasy</h1>
        </div>
        <div class="hidden md:flex md:space-x-8">
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">Home</a>
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">Products</a>
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">About Us</a>
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="text-gray-200 dark:text-gray-300 hover:text-white">
                <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="h-8 w-8 rounded-full" />
            </a>
            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">Cart</button>
        </div>
    </div>
</nav>

<main class="pt-24">
    <h2 class="text-3xl text-gray-800 dark:text-gray-200 text-center my-8">Welcome to ShopEasy!</h2>
    <p class="text-gray-600 dark:text-gray-400 text-center mb-8">Discover amazing products with unbeatable prices.</p>
    <div class="flex justify-center space-x-4">
        <img src="https://picsum.photos/300/200?random=1" alt="Product 1" class="rounded-lg shadow-md" />
        <img src="https://picsum.photos/300/200?random=2" alt="Product 2" class="rounded-lg shadow-md" />
        <img src="https://picsum.photos/300/200?random=3" alt="Product 3" class="rounded-lg shadow-md" />
    </div>
</main>