Componente de cuadro de búsqueda

<div class="flex items-center justify-center min-h-screen bg-gray-900 text-white">
    <div class="bg-gray-800 p-8 rounded-lg shadow-lg space-y-4">
        <h1 class="text-3xl font-bold text-center">Search</h1>
        <div class="flex items-center bg-gray-700 p-2 rounded-md">
            <input type="text" placeholder="Type to search..." class="flex-grow bg-transparent border-none text-white outline-none placeholder-gray-400" />
            <button class="ml-2 bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 transition duration-300">Go</button>
        </div>
        <div class="text-center">
            <img src="https://picsum.photos/200/100" alt="Placeholder image" class="w-full h-auto rounded-md mt-4">
        </div>
        <div class="flex items-center justify-between mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            <span class="text-sm">User Name</span>
        </div>
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1F1F1F;
        }
        .bg-gray-800 {
            background-color: #2d2d2d;
        }
        .bg-gray-700 {
            background-color: #3e3e3e;
        }
    }
</style>