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.
Código HTML
<header class="bg-gray-900 text-gray-200 py-4 px-6 shadow-md">
<div class="container mx-auto flex flex-wrap items-center justify-between">
<div class="text-xl font-bold">SocialNet</div>
<div class="flex-grow mx-4 max-w-md">
<input type="text" placeholder="Search..." class="w-full px-3 py-2 bg-gray-800 text-gray-200 rounded-md focus:outline-none focus:ring focus:border-blue-300 dark:bg-gray-700 dark:text-gray-100 dark:focus:border-blue-600">
</div>
<nav>
<a href="#" class="px-3 py-2 hover:text-blue-400 dark:hover:text-blue-500">Profile</a>
</nav>
</div>
</header>Componentes relacionados
Encabezado de negocio de diseño de materiales
Material Design inspiró un componente de encabezado simple con un esquema de color complementario para sitios web comerciales. Diseño responsivo con soporte para temas oscuros.
DarkTriadicSimpleBusinessHeader
Componente de encabezado responsivo con soporte de modo oscuro para sitios web comerciales
Componente de encabezado de redes sociales
Un componente de encabezado complejo y responsivo de modo oscuro con un diseño minimalista y una combinación de colores complementaria, diseñado para interfaces de redes sociales.