Navigation brutaliste sur les réseaux sociaux
Un composant de navigation réactif conçu dans un style brutaliste pour les applications de médias sociaux, utilisant une palette de couleurs complémentaires et des éléments minimaux.
HTML Code
<nav class="bg-gray-800 dark:bg-gray-900 p-4 flex justify-between items-center">
<div class="flex items-center space-x-4">
<a href="#" class="text-white dark:text-gray-200 font-bold text-lg">Logo</a>
<ul class="flex space-x-4">
<li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Home</a></li>
<li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Profile</a></li>
<li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Messages</a></li>
<li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Settings</a></li>
</ul>
</div>
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
<a href="#" class="text-white dark:text-gray-200 font-bold">Logout</a>
</div>
</nav>
<div class="bg-gray-100 dark:bg-gray-800 p-8">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Welcome to Our Social Media</h1>
<img src="https://picsum.photos/800/400" alt="Random Image" class="rounded-lg shadow-lg">
</div>
Composants associés
Composant Composants de navigation
Un composant de navigation réactif avec prise en charge du mode sombre à l’aide de Tailwind CSS. Il comprend un logo, des liens de navigation et un bouton d’appel à l’action.
RetroPortfolioNavigation
Composant de navigation rétro/vintage pour portefeuille avec prise en charge de la palette de couleurs pastel, réactive et du mode sombre.
Composants de navigation
Une barre de navigation en mode sombre avec un design réactif, avec un logo, un avatar et des liens pour la navigation.