Brutalisme Barre latérale Navigation
Composant de navigation dans la barre latérale réactif avec un design brutal, une palette de couleurs vibrantes et une mise en page simple à des fins de blog/contenu. Inclut la prise en charge du mode sombre.
HTML Code
<div class="flex h-screen bg-gray-100 dark:bg-gray-900">
<!-- Sidebar -->
<div class="w-64 px-4 py-6 bg-yellow-400 dark:bg-yellow-700 border-r-4 border-black dark:border-white">
<h2 class="text-2xl font-bold text-black dark:text-white">Navigation</h2>
<nav class="mt-8">
<ul>
<li class="mb-4">
<a href="#" class="block text-black dark:text-white hover:underline text-xl">Home</a>
</li>
<li class="mb-4">
<a href="#" class="block text-black dark:text-white hover:underline text-xl">Articles</a>
</li>
<li class="mb-4">
<a href="#" class="block text-black dark:text-white hover:underline text-xl">About</a>
</li>
<li class="mb-4">
<a href="#" class="block text-black dark:text-white hover:underline text-xl">Contact</a>
</li>
</ul>
</nav>
</div>
<!-- Content Area (for demonstration) -->
<div class="flex-1 p-10">
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-6">Main Content Area</h1>
<p class="text-gray-700 dark:text-gray-300">
This is where the main content of your blog or article would go.
The sidebar provides navigation on the left.
</p>
</div>
</div>Composants associés
Glassmorphism Navigation latérale
Un composant de navigation de barre latérale réactif avec un design Glassmorphism, la prise en charge du mode sombre et l’utilisation de Tailwind CSS. Comporte des éléments translucides givrés ressemblant à du verre avec des effets de flou.
Glassmorphism Sidebar Navigation Component
Un composant de navigation de la barre latérale de style Glassmorphism pour les blogs, avec une palette de couleurs monochromatiques. Il s’agit d’un design simple et réactif avec prise en charge du mode sombre, utilisant uniquement HTML et Tailwind CSS. La barre latérale comprend un titre de site, des liens de navigation et une section de profil.
Composant de navigation dans la barre latérale
Un composant de navigation latéral réactif conçu dans le style Brutalism, parfait pour les applications de commerce électronique. Il présente des couleurs vives, un contraste élevé et de multiples éléments interactifs, notamment des liens vers différentes catégories d’achat, des options de compte utilisateur et un bouton d’appel à l’action dynamique pour l’accès au panier. Le design s’adapte également au mode sombre.