Componente de encabezado
Un componente de encabezado con estilo Neumorphism para un portafolio con un tema oscuro, diseño interactivo y contiene varios elementos interactivos.
Código HTML
<header class="bg-gray-100 dark:bg-gray-800 shadow-lg rounded-lg p-6 flex flex-col md:flex-row items-center justify-between space-y-4 md:space-y-0">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/60" alt="Logo" class="h-10 w-10 rounded-full shadow-lg">
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">My Portfolio</h1>
</div>
<nav class="flex space-x-4">
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-200">Home</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-200">About</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-200">Projects</a>
<a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-200">Contact</a>
</nav>
<div class="flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full shadow-lg">
<button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg transition duration-200 hover:bg-blue-600 dark:hover:bg-blue-800">Get In Touch</button>
</div>
</header>Componentes relacionados
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.
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.