Componente de encabezado
Un componente de encabezado simple y receptivo para redes sociales, con soporte para modo oscuro. Cuenta con un logotipo, una barra de búsqueda y un avatar de usuario. Utiliza un esquema de color en escala de grises.
Código HTML
<header class="bg-white dark:bg-gray-900 p-4 shadow-md">
<div class="container mx-auto flex justify-between items-center">
<!-- Logo or Site Title -->
<a href="#" class="text-2xl font-bold text-gray-900 dark:text-white">SocialSite</a>
<!-- Search Bar -->
<div class="flex-grow mx-4 max-w-xl">
<input type="text" placeholder="Search..." class="w-full p-2 rounded-lg bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
</div>
<!-- User Avatar/Menu -->
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
</div>
</div>
</header>Componentes relacionados
Componente de encabezado
Un componente de encabezado receptivo para un tablero con microinteracciones y colores vibrantes, compatible con el tema oscuro.
Encabezado de diseño 3D
Un componente de encabezado receptivo con elementos de diseño 3D y compatibilidad con el modo oscuro.
Cabecera de Redes Sociales
Un componente de encabezado receptivo para interfaces de redes sociales, diseñado con una interfaz de usuario de modo oscuro que utiliza un esquema de color triádico y elementos mínimos. Incluye un título del sitio, una barra de búsqueda y un enlace al perfil de usuario, con estilos adaptados para el modo oscuro utilizando Tailwind CSS.