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.
Código HTML
<header class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md flex justify-between items-center">
<div class="flex items-center">
<img src="https://picsum.photos/50" alt="Logo" class="rounded-full shadow-md" />
<h1 class="text-2xl font-bold text-gray-800 dark:text-white ml-2">My Blog</h1>
</div>
<nav class="flex space-x-4">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">Home</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">About</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">Contact</a>
</nav>
</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.
Neon_Glow_Header_Component
Un componente de encabezado receptivo para aplicaciones SaaS con efectos de neón/resplandor y un esquema de color dulce/dulce, con soporte para modo oscuro y elementos interactivos.
Encabezado de panel complejo
Un componente de encabezado complejo y receptivo con elementos de diseño 3D, combinación de colores en tonos tierra, diseñado para tableros. Incluye soporte para temas oscuros usando Tailwind CSS y usa picsum.photos y randomuser.me para imágenes / avatares de demostración.