レトロビンテージヘッダーコンポーネント

<header class="bg-gradient-to-r from-purple-700 via-pink-500 to-yellow-500 dark:bg-gradient-to-r dark:from-purple-900 dark:via-pink-700 dark:to-yellow-700 p-5">
    <div class="flex justify-between items-center">
        <div class="flex items-center">
            <img src="https://picsum.photos/50" alt="Logo" class="rounded-full mr-3">
            <h1 class="text-white text-3xl font-bold">My Dashboard</h1>
        </div>
        <nav class="space-x-4">
            <a href="#" class="text-white transition duration-300 ease-in-out hover:text-yellow-300">Home</a>
            <a href="#" class="text-white transition duration-300 ease-in-out hover:text-yellow-300">Reports</a>
            <a href="#" class="text-white transition duration-300 ease-in-out hover:text-yellow-300">Settings</a>
        </nav>
    </div>
    <div class="mt-4">
        <input type="text" placeholder="Search..." class="p-2 rounded-md bg-white dark:bg-gray-800 text-gray-800 dark:text-white focus:outline-none focus:ring-2 focus:ring-yellow-500 w-full max-w-md">
    </div>
    <div class="mt-4 flex items-center space-x-3">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-8 w-8">
            <span class="ml-2 text-white">John Doe</span>
        </div>
        <button class="bg-yellow-500 text-white px-4 py-2 rounded-md hover:bg-yellow-400 transition duration-300">Logout</button>
    </div>
</header>