Brutalisme Navigation collante
Un composant de navigation autocollant complexe avec un design brutaliste, une palette de couleurs monochromatiques, conçu pour les portfolios, avec un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<header class="text-gray-600 dark:text-gray-400 body-font sticky top-0 z-50 bg-white dark:bg-gray-900 border-b-4 border-black dark:border-white">
<div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
<a class="flex title-font font-medium items-center text-gray-900 dark:text-white mb-4 md:mb-0">
<span class="text-xl border-4 border-black dark:border-white p-2 font-bold">BRUTALIST NAV</span>
</a>
<nav class="md:ml-auto flex flex-wrap items-center text-base justify-center font-bold">
<a href="#" class="mr-5 hover:text-gray-900 dark:hover:text-white border-b-4 border-transparent hover:border-black dark:hover:border-white transition duration-300 ease-in-out">Home</a>
<a href="#" class="mr-5 hover:text-gray-900 dark:hover:text-white border-b-4 border-transparent hover:border-black dark:hover:border-white transition duration-300 ease-in-out">About</a>
<a href="#" class="mr-5 hover:text-gray-900 dark:hover:text-white border-b-4 border-transparent hover:border-black dark:hover:border-white transition duration-300 ease-in-out">Portfolio</a>
<a href="#" class="mr-5 hover:text-gray-900 dark:hover:text-white border-b-4 border-transparent hover:border-black dark:hover:border-white transition duration-300 ease-in-out">Contact</a>
</nav>
<button class="inline-flex items-center bg-gray-100 dark:bg-gray-800 border-4 border-black dark:border-white py-1 px-3 focus:outline-none hover:bg-gray-200 dark:hover:bg-gray-700 text-base mt-4 md:mt-0 font-bold">
Hire Me
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-4 h-4 ml-1" viewBox="0 0 24 24">
<path d="M5 12h14M12 5l7 7-7 7"></path>
</svg>
</button>
</div>
</header>Composants associés
Composant de navigation collante
Un composant de navigation autocollant skeuomorphe conçu pour les sites Web d’actualités/journalisme, avec une palette de couleurs noir et blanc avec une couleur d’accentuation vive, une réactivité et une prise en charge du mode sombre. Il imite les boutons et les éléments encastrés du monde réel.
Composant de navigation collante
Une barre de navigation réactive et collante avec des effets de néon/lueur, adaptée aux plateformes d’éducation ou d’apprentissage. Dispose d’une palette de couleurs violet/violet, d’une prise en charge du mode sombre et d’éléments de menu interactifs.
Composant de navigation collante
Un composant de navigation autocollant avec une conception Neumorphism, une palette de couleurs complémentaire, une complexité modérée et une prise en charge réactive du thème sombre pour un tableau de bord. La conception intègre des ombres douces pour l’effet Neumorphism et utilise des couleurs complémentaires pour créer une interface visuellement attrayante. Il convient à un tableau de bord fournissant des panneaux de visualisation de données et de contrôle.