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 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.
Componente de encabezado de comercio electrónico
Un componente de encabezado de comercio electrónico receptivo creado con Tailwind CSS con principios de Material Design. Cuenta con un esquema de color monocromático (tonos de azul), funcionalidad de búsqueda, menú de navegación, carrito de compras y perfil de usuario. El encabezado incluye efectos de profundidad como sombras y admite el modo oscuro. El componente es totalmente responsivo con un menú de hamburguesas móvil.
Encabezado de diseño 3D
Un componente de encabezado receptivo con elementos de diseño 3D y compatibilidad con el modo oscuro.