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
Encabezado de negocio de diseño de materiales
Material Design inspiró un componente de encabezado simple con un esquema de color complementario para sitios web comerciales. Diseño responsivo con soporte para temas oscuros.
Componente de encabezado
Componente de encabezado con microinteracciones, combinación de colores complementaria, complejidad compleja, para fines de tablero, utilizando Tailwind CSS.
Componente de encabezado
Un componente de encabezado responsivo con microinteracciones con animaciones pequeñas y atractivas y compatibilidad con temas oscuros mediante Tailwind CSS.