Composante de navigation brutale
Un composant de navigation réactif conçu dans un style brutaliste, présentant une palette de couleurs monochromatiques, idéal pour un site Web de portfolio. Les caractéristiques incluent une mise en page audacieuse avec un contraste élevé, la prise en charge du mode sombre à l’aide de Tailwind CSS et des éléments interactifs tels que des listes déroulantes ou des liens de boutons.
HTML Code
<nav class="bg-gray-900 dark:bg-gray-800 p-5 flex justify-between items-center">
<div class="text-white font-bold text-2xl">
Portfolio
</div>
<ul class="flex space-x-6">
<li>
<a href="#" class="text-gray-300 hover:text-white transition duration-200">Home</a>
</li>
<li>
<a href="#" class="text-gray-300 hover:text-white transition duration-200">About</a>
</li>
<li>
<a href="#" class="text-gray-300 hover:text-white transition duration-200">Projects</a>
</li>
<li>
<a href="#" class="text-gray-300 hover:text-white transition duration-200">Contact</a>
</li>
</ul>
<div class="relative group">
<button class="text-gray-300 hover:text-white transition duration-200 focus:outline-none">
Menu
</button>
<div class="absolute left-0 mt-2 w-48 bg-gray-700 dark:bg-gray-600 rounded-md shadow-xl opacity-0 group-hover:opacity-100 transition duration-200 ease-in-out">
<a href="#" class="block px-4 py-2 text-gray-200 hover:bg-gray-800 dark:hover:bg-gray-700">Action 1</a>
<a href="#" class="block px-4 py-2 text-gray-200 hover:bg-gray-800 dark:hover:bg-gray-700">Action 2</a>
</div>
</div>
</nav>
<section class="bg-gray-800 dark:bg-gray-900 p-10">
<h2 class="text-white text-3xl font-bold mb-4">Featured Projects</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="w-full">
<div class="p-4">
<h3 class="text-xl text-white font-semibold">Project Title 1</h3>
<p class="text-gray-300">Short description of project 1.</p>
</div>
</div>
<div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="w-full">
<div class="p-4">
<h3 class="text-xl text-white font-semibold">Project Title 2</h3>
<p class="text-gray-300">Short description of project 2.</p>
</div>
</div>
<div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
<img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="w-full">
<div class="p-4">
<h3 class="text-xl text-white font-semibold">Project Title 3</h3>
<p class="text-gray-300">Short description of project 3.</p>
</div>
</div>
</div>
</section>Composants associés
Navigation skeuomorphe
Un composant de navigation simple et réactif avec un design skeuomorphique, une palette de couleurs analogue adaptée aux applications de médias sociaux, avec prise en charge du thème sombre.
Navigation dans le portefeuille en mode sombre
Composant de navigation complexe et réactif pour un site web de portfolio, doté d’une interface utilisateur en mode sombre avec des couleurs analogues, conçu pour présenter des travaux ou des produits. Comprend des mises en page pour ordinateurs, tablettes et appareils mobiles avec des listes déroulantes et l’avatar de l’utilisateur.
Navigation sur les réseaux sociaux
Un composant de navigation réactif sur les réseaux sociaux avec une palette de couleurs sourdes/désaturées, inspiré des principes de conception matérielle, prenant en charge les modes clair et sombre. Dispose d’une mise en page basée sur une grille et d’effets de profondeur.