Barre de navigation brutaliste
Une barre de navigation réactive conçue dans un style brutaliste avec des couleurs à haute saturation, pour la consommation de blogs et de contenu, avec prise en charge du thème sombre.
HTML Code
<nav class="bg-green-600 dark:bg-green-900 p-4">
<div class="container mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<a href="#" class="text-white text-lg font-bold hover:text-yellow-300 dark:hover:text-yellow-400">Home</a>
<a href="#" class="text-white text-lg font-bold hover:text-yellow-300 dark:hover:text-yellow-400">About</a>
<a href="#" class="text-white text-lg font-bold hover:text-yellow-300 dark:hover:text-yellow-400">Blog</a>
<a href="#" class="text-white text-lg font-bold hover:text-yellow-300 dark:hover:text-yellow-400">Contact</a>
</div>
<div class="hidden md:flex items-center space-x-4">
<a href="#" class="text-white bg-yellow-400 dark:bg-yellow-600 px-4 py-2 rounded-lg hover:bg-yellow-300 dark:hover:bg-yellow-500">Sign In</a>
<a href="#" class="text-white bg-red-500 dark:bg-red-700 px-4 py-2 rounded-lg hover:bg-red-400 dark:hover:bg-red-600">Get Started</a>
</div>
</div>
<div class="md:hidden mt-2">
<button class="text-white rounded-md p-2 hover:bg-yellow-300 dark:hover:bg-yellow-500">
Menu
</button>
</div>
</nav>
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-200 p-4">
<h1 class="text-3xl font-bold">Welcome to My Blog</h1>
<p class="mt-2">Discover amazing articles and content that inspire and educate.</p>
<img class="mt-4 rounded-lg" src="https://picsum.photos/800/400" alt="Random Image">
<div class="flex mt-4 space-x-4">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profile Picture">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Profile Picture">
</div>
</div>Composants associés
Barre de navigation
Composant de barre de navigation réactive en mode sombre à l’aide de Tailwind CSS
Luxury_Premium_Dating_Social_NavBar
Une barre de navigation de style luxe/premium pour les plateformes de rencontres/sociales, avec une typographie élégante, une palette de couleurs à contraste élevé et un design réactif avec prise en charge du mode sombre. Comprend des éléments interactifs tels qu’un avatar de profil et une icône de notification.
Barre de navigation du portefeuille
Une barre de navigation réactive avec prise en charge du thème sombre, conçue pour un site Web de portfolio utilisant les principes de conception matérielle et la palette de couleurs des tons de terre. Il comprend un logo de marque, des liens de navigation et un bouton d’appel à l’action. Le design est modérément complexe et s’adapte aux différentes tailles d’écran.