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 une esthétique brutaliste, avec des designs audacieux, un contraste élevé et des mises en page inhabituelles. Il comprend des effets réactifs et prend en charge les thèmes sombres avec CSS.
Composants d’amélioration de la navigation
Une barre de navigation rétro/vintage avec un design complexe pour les sites Web professionnels, avec une palette de couleurs triadique et une prise en charge réactive du thème sombre.
Composant d’amélioration de la navigation
Un composant de navigation réactif conçu pour un portefeuille, utilisant un style brutaliste avec une palette de couleurs pastel et la prise en charge du mode sombre.