Componente de encabezado
Un componente de encabezado receptivo para un tablero con microinteracciones y colores vibrantes, compatible con el tema oscuro.
Código HTML
<header class="bg-blue-600 dark:bg-gray-800 p-4 flex justify-between items-center transition-all duration-300">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full h-10 w-10 hover:scale-110 transition-transform duration-300">
<h1 class="text-white text-xl font-bold hover:text-blue-300 transition-colors duration-300">Dashboard</h1>
</div>
<nav class="hidden md:flex space-x-6">
<a href="#" class="text-white hover:text-blue-300 transition-colors duration-300">Home</a>
<a href="#" class="text-white hover:text-blue-300 transition-colors duration-300">Reports</a>
<a href="#" class="text-white hover:text-blue-300 transition-colors duration-300">Settings</a>
</nav>
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-10 w-10 border-2 border-white hover:border-blue-300 transition-all duration-300">
<button class="bg-blue-700 dark:bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-500 transition-colors duration-300">Logout</button>
</div>
</header>Componentes relacionados
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.
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.
Componente de encabezado
Componente de encabezado con microinteracciones, combinación de colores complementaria, complejidad compleja, para fines de tablero, utilizando Tailwind CSS.