Componente de encabezado
Un componente de encabezado responsivo con microinteracciones con animaciones pequeñas y atractivas y compatibilidad con temas oscuros mediante Tailwind CSS.
Código HTML
<header class="bg-white dark:bg-gray-800 shadow-md p-4 transition duration-500">
<div class="flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/40" alt="Logo" class="h-10 w-10 rounded-full mr-2 transition-transform duration-300 transform hover:scale-110" />
<h1 class="text-xl font-bold text-gray-800 dark:text-white transition-colors duration-500">My Website</h1>
</div>
<nav>
<ul class="flex space-x-4">
<li class="group">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-all duration-300">Home</a>
</li>
<li class="group">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-all duration-300">About</a>
</li>
<li class="group">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-all duration-300">Services</a>
</li>
<li class="group">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-all duration-300">Contact</a>
</li>
</ul>
</nav>
<div class="relative">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full border-2 border-gray-300 dark:border-gray-600 transition-transform duration-300 transform hover:scale-110" />
</div>
</div>
</header>Componentes relacionados
Componente de encabezado brutalista
Un componente de encabezado crudo y audaz diseñado con Tailwind CSS, con alto contraste y diseños inusuales adecuados para temas claros y oscuros.
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 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.