Composant d’en-tête brutaliste
Un composant d’en-tête brut et audacieux conçu avec Tailwind CSS, avec un contraste élevé et des mises en page inhabituelles adaptées aux thèmes clairs et sombres.
HTML Code
<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>Composants associés
Composant d’en-tête
composant d’en-tête tailwind avec conception 3D, palette de couleurs pastel, complexité complexe, objectif du tableau de bord, conception réactive et prise en charge du thème sombre
Composant d’en-tête de réseau social
Un composant d’en-tête complexe, réactif en mode sombre, au design minimaliste et aux couleurs complémentaires, conçu pour les interfaces de médias sociaux.
Composant d’en-tête
Composant d’en-tête de style Neumorphism pour un portfolio avec un thème sombre, un design réactif et contenant plusieurs éléments interactifs.