Componente de encabezado
Un componente de encabezado responsivo diseñado en un estilo brutalista con un esquema de color pastel para un blog o sitio de contenido, que incorpora soporte para temas oscuros.
Código HTML
<header class="bg-pastel-100 dark:bg-gray-800 p-6 flex items-center justify-between">
<div class="flex items-center space-x-3">
<img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full">
<h1 class="text-xl font-bold text-gray-900 dark:text-white">My Blog</h1>
</div>
<nav class="space-x-4">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Home</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">About</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Blog</a>
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">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="w-10 h-10 rounded-full">
<span class="text-gray-900 dark:text-white">Username</span>
</div>
</header>
<style>
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
/* Define pastel colors */
.bg-pastel-100 {
background-color: #F9D7C1;
}
}
</style>Componentes relacionados
Componente de encabezado skeuomórfico
Un componente de encabezado simple y receptivo diseñado para sitios web de comercio electrónico con un estilo esqueuomórfico, que utiliza un esquema de color en escala de grises y admite el modo oscuro.
Componente de encabezado
Un componente de encabezado responsivo con microinteracciones con animaciones pequeñas y atractivas y compatibilidad con temas oscuros mediante Tailwind CSS.
Componente de encabezado
Un componente de encabezado receptivo con un diseño retro / vintage, con soporte de tema oscuro y estética nostálgica de los años 80 / 90.