Composant de navigation collante

<header class="bg-gray-900 text-white shadow sticky top-0 z-50">
    <div class="container mx-auto p-4 flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3" />
            <h1 class="text-xl font-semibold">My Website</h1>
        </div>
        <nav class="hidden md:flex space-x-4">
            <a href="#" class="hover:text-gray-400">Home</a>
            <a href="#" class="hover:text-gray-400">About</a>
            <a href="#" class="hover:text-gray-400">Services</a>
            <a href="#" class="hover:text-gray-400">Contact</a>
        </nav>
        <div class="md:hidden">
            <button class="text-gray-400 hover:text-gray-500 focus:outline-none">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
</header>

<main class="bg-gray-800 text-white min-h-screen p-4">
    <section>
        <h2 class="text-2xl font-bold mb-4">Welcome to My Website</h2>
        <p>Here is some content!</p>
        <img src="https://picsum.photos/800/300" alt="Placeholder" class="mt-4 rounded-lg shadow-lg" />
    </section>
</main>

<footer class="bg-gray-900 text-gray-400 text-center p-4">
    <p>&copy; 2023 My Website</p>
</footer>