Composants d’amélioration de la navigation

<nav class="bg-gray-800 text-white p-4 dark:bg-gray-900">
    <div class="container mx-auto flex justify-between items-center">
        <a href="#" class="text-2xl font-bold hover:text-blue-400 dark:hover:text-blue-300">Retro Blog</a>
        <div class="hidden md:flex space-x-4">
            <a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Home</a>
            <a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">About</a>
            <a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Blog</a>
            <a href="#" class="hover:text-blue-400 dark:hover:text-blue-300">Contact</a>
        </div>
        <div class="md:hidden">
            <button class="text-white focus:outline-none">
                <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="M4 6h16M4 12h16m-7 6h7" />
                </svg>
            </button>
        </div>
    </div>
    <div class="mt-4 md:hidden">
        <a href="#" class="block py-2 px-4 hover:bg-gray-700">Home</a>
        <a href="#" class="block py-2 px-4 hover:bg-gray-700">About</a>
        <a href="#" class="block py-2 px-4 hover:bg-gray-700">Blog</a>
        <a href="#" class="block py-2 px-4 hover:bg-gray-700">Contact</a>
    </div>
</nav>

<main class="bg-gray-100 dark:bg-gray-800 p-8">
    <h1 class="text-3xl font-bold mb-4 text-gray-900 dark:text-white">Welcome to the Retro Blog!</h1>
    <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
        <article class="bg-white dark:bg-gray-900 p-6 rounded shadow hover:shadow-lg transition-shadow">
            <img src="https://picsum.photos/200/150" alt="Blog Post" class="rounded mb-4">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 1</h2>
            <p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <a href="#" class="mt-4 inline-block text-blue-500 font-semibold hover:underline dark:text-blue-400">Read More</a>
        </article>
        <article class="bg-white dark:bg-gray-900 p-6 rounded shadow hover:shadow-lg transition-shadow">
            <img src="https://picsum.photos/200/151" alt="Blog Post" class="rounded mb-4">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 2</h2>
            <p class="text-gray-600 dark:text-gray-400">Consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
            <a href="#" class="mt-4 inline-block text-blue-500 font-semibold hover:underline dark:text-blue-400">Read More</a>
        </article>
        <article class="bg-white dark:bg-gray-900 p-6 rounded shadow hover:shadow-lg transition-shadow">
            <img src="https://picsum.photos/200/152" alt="Blog Post" class="rounded mb-4">
            <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title 3</h2>
            <p class="text-gray-600 dark:text-gray-400">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
            <a href="#" class="mt-4 inline-block text-blue-500 font-semibold hover:underline dark:text-blue-400">Read More</a>
        </article>
    </div>
</main>

<footer class="bg-gray-800 text-white p-4 dark:bg-gray-900 mt-8">
    <div class="container mx-auto text-center">
        <p>&copy; 2023 Retro Blog. All rights reserved.</p>
    </div>
</footer>