Componente de cuadro de búsqueda
Un componente de cuadro de búsqueda receptivo diseñado en un estilo brutalista con soporte para temas oscuros utilizando Tailwind CSS.
Código HTML
<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>Componentes relacionados
Cuadro de búsqueda brutalista
Un componente de cuadro de búsqueda brutalista para un tablero, con un esquema de color complementario y una complejidad moderada, con diseño receptivo y soporte de temas oscuros mediante Tailwind CSS.
Cuadro de búsqueda simple de pastel en 3D
Un componente de cuadro de búsqueda responsivo con un diseño similar al 3D, combinación de colores pastel y compatibilidad con temas oscuros, creado con Tailwind CSS para un sitio web de blog/contenido.
Componente de cuadro de búsqueda
Un componente de cuadro de búsqueda complejo de estilo Glassmorphism con un esquema de color análogo, adecuado para un portafolio, con diseño receptivo y soporte de temas oscuros que usa solo HTML y Tailwind CSS.