Navigation 구성 요소

<nav class="bg-gray-800 text-white py-4 shadow-lg">
    <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-gray-400 transition duration-300">RetroNav</a>
            <ul class="hidden md:flex space-x-4">
                <li><a href="#" class="hover:text-gray-400 transition duration-300">Home</a></li>
                <li><a href="#" class="hover:text-gray-400 transition duration-300">About</a></li>
                <li><a href="#" class="hover:text-gray-400 transition duration-300">Services</a></li>
                <li><a href="#" class="hover:text-gray-400 transition duration-300">Contact</a></li>
            </ul>
        </div>
        <div class="md:hidden">
            <button class="text-gray-400 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>
</nav>

<div class="bg-gray-900 text-white p-8 flex flex-col items-center">
    <h1 class="text-3xl font-bold mb-4">Welcome to RetroNav</h1>
    <p class="mb-4">Experience the nostalgia of the 80s and 90s with our vintage-inspired designs.</p>
    <img src="https://picsum.photos/300/200?random=1" alt="Random Image" class="mb-4 rounded-lg shadow-md">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-600">
        <span class="font-semibold">User Name</span>
    </div>
</div>

<style>
    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a1a1a;
            color: white;
        }
        nav {
            background-color: #2c2c2c;
        }
    }
</style>