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
Componente de encabezado
Un componente de encabezado responsivo con microinteracciones y soporte para temas oscuros.
Componente de encabezado
Un componente de encabezado simple diseñado con el estilo Neumorphism con colores vibrantes, perfecto para una página web de blog/contenido. Cuenta con soporte de modo oscuro para diseño receptivo.
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.