Composant d’amélioration de la navigation
Un composant d’amélioration de la navigation conçu dans un style brutaliste. Avec des effets réactifs, la prise en charge du thème sombre et des images de remplacement.
HTML Code
<nav class="bg-white dark:bg-gray-900 p-6 text-center">
<div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50" alt="Logo" class="rounded-full border-2 border-black dark:border-white">
<h1 class="text-3xl font-bold text-black dark:text-white">Brutalist Navigation</h1>
</div>
<ul class="flex space-x-6 mt-4 md:mt-0">
<li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Home</a></li>
<li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">About</a></li>
<li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Services</a></li>
<li><a href="#" class="text-lg text-black dark:text-white hover:text-gray-700 dark:hover:text-gray-300">Contact</a></li>
</ul>
</div>
<div class="mt-8">
<h2 class="text-xl text-black dark:text-white">Featured</h2>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
<div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
<img src="https://picsum.photos/200/100" alt="Placeholder Image 1" class="w-full h-32 object-cover rounded-lg mb-2">
<p class="text-black dark:text-white">Raw and bold imagery.</p>
</div>
<div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
<img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image 2" class="w-full h-32 object-cover rounded-lg mb-2">
<p class="text-black dark:text-white">Unusual and eye-catching layouts.</p>
</div>
<div class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg">
<img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image 3" class="w-full h-32 object-cover rounded-lg mb-2">
<p class="text-black dark:text-white">High contrast designs.</p>
</div>
</div>
</div>
</nav>Composants associés
Composants d’amélioration de la navigation
Un composant de navigation conçu avec le skeuomorphisme, avec des éléments numériques qui imitent leurs homologues du monde réel. Il est stylisé à l’aide de Tailwind CSS avec des effets réactifs et la prise en charge du thème sombre.
Composants d’amélioration de la navigation
Un composant de navigation réactif conçu avec les concepts de conception matérielle à l’aide de Tailwind CSS, avec la prise en charge du thème sombre et des images de remplacement.
Composants d’amélioration de la navigation
Un composant simple d’amélioration de la navigation en mode sombre pour présenter un portfolio, à l’aide de Tailwind CSS.