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.
Código HTML
<header class="bg-gray-900 text-gray-100">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a class="flex title-font font-medium items-center text-white mb-4 md:mb-0">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-10 h-10 text-white p-2 bg-indigo-500 rounded-full" viewBox="0 0 24 24">
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"></path>
</svg>
<span class="ml-3 text-xl">DarkMode Header</span>
</a>
<nav class="md:ml-auto flex flex-wrap items-center text-base justify-center">
<a class="mr-5 hover:text-white">First Link</a>
<a class="mr-5 hover:text-white">Second Link</a>
<a class="mr-5 hover:text-white">Third Link</a>
<a class="mr-5 hover:text-white">Fourth Link</a>
</nav>
<button class="inline-flex items-center bg-gray-800 border-0 py-1 px-3 focus:outline-none hover:bg-gray-700 rounded text-base mt-4 md:mt-0">Button
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
</div>
</header>Componentes relacionados
Componente de encabezado de comercio electrónico
Un componente de encabezado receptivo, vibrante e inspirado en Material Design para sitios web de comercio electrónico, con navegación, búsqueda y acciones del usuario. Soporta el modo oscuro.
Componente de encabezado
Componente de encabezado de viento de cola con diseño 3D, combinación de colores pastel, complejidad compleja, propósito del tablero, diseño receptivo y compatibilidad con temas oscuros
Componente de encabezado
Un componente de encabezado receptivo para una plataforma de música/audio, con una estética de diseño monoespaciado/desarrollador con tonos tierra y soporte para modo oscuro.