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.
Código HTML
<header class="bg-gray-900 text-white p-6">
<div class="flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50" alt="Logo" class="w-16 h-16 rounded-full border-4 border-yellow-500">
<h1 class="text-3xl font-bold">Brutalist Header</h1>
</div>
<nav class="flex space-x-6">
<a href="#" class="text-yellow-300 hover:underline">Home</a>
<a href="#" class="text-yellow-300 hover:underline">About</a>
<a href="#" class="text-yellow-300 hover:underline">Services</a>
<a href="#" class="text-yellow-300 hover:underline">Contact</a>
</nav>
</div>
<div class="mt-4 pt-4 border-t border-yellow-500 flex flex-col space-y-2">
<h2 class="text-xl font-bold">Welcome to the Brutalist World</h2>
<p class="text-sm">This is a header component that embodies the raw and bold aesthetics of Brutalism.</p>
</div>
</header>
<style>
@media (prefers-color-scheme: dark) {
header {
background-color: #1c1917;
color: #f9fafb;
}
a {
color: #fbbf24;
}
}
</style>Componentes relacionados
Cabecera de Redes Sociales
Un componente de encabezado receptivo para interfaces de redes sociales, diseñado con una interfaz de usuario de modo oscuro que utiliza un esquema de color triádico y elementos mínimos. Incluye un título del sitio, una barra de búsqueda y un enlace al perfil de usuario, con estilos adaptados para el modo oscuro utilizando Tailwind CSS.
Encabezado de diseño 3D
Un componente de encabezado receptivo con elementos de diseño 3D y compatibilidad con el modo oscuro.
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.