Componente de encabezado 3D
Un componente de encabezado complejo e interactivo diseñado para interfaces de redes sociales que utilizan un estilo 3D con colores en escala de grises. Incluye un logotipo, una barra de búsqueda, avatares de usuario y botones de acción, con comportamiento responsivo y compatibilidad con el modo oscuro.
Código HTML
<header class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-4 flex items-center justify-between">
<div class="flex items-center">
<img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full shadow-lg">
<h1 class="ml-3 text-gray-800 dark:text-white text-xl font-bold">Social Media App</h1>
</div>
<div class="flex-grow mx-4">
<input type="text" placeholder="Search..." class="bg-gray-200 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg px-4 py-2 w-full focus:outline-none focus:ring-2 focus:ring-gray-500 dark:focus:ring-gray-400 transition-shadow duration-300 shadow-md dark:shadow-lg" />
</div>
<div class="flex items-center">
<button class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-300 p-2 rounded-lg shadow-md dark:shadow-lg mr-2">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar" class="rounded-full w-8 h-8">
</button>
<button class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-300 p-2 rounded-lg shadow-md dark:shadow-lg">
<img src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar" class="rounded-full w-8 h-8">
</button>
</div>
</header>Componentes relacionados
RetroHeaderComponent
Componente de encabezado retro / vintage con efectos receptivos y soporte para temas oscuros.
Componente de encabezado
Un componente de encabezado receptivo con un diseño retro / vintage, con soporte de tema oscuro y estética nostálgica de los años 80 / 90.
Componente de encabezado
Un componente de encabezado receptivo con soporte para modo oscuro, con un logotipo, enlaces de navegación y un botón de llamada a la acción. El diseño utiliza un fondo oscuro para reducir la fatiga visual.