Brutalisme Barre latérale Navigation
Un composant de navigation de barre latérale de style brutaliste avec des tons de terre, une complexité modérée, une réactivité et une prise en charge du mode sombre, conçu pour les sites de blogs/contenus utilisant Tailwind CSS.
HTML Code
<div class="flex h-screen bg-stone-100 dark:bg-stone-900">
<!-- Sidebar -->
<div class="w-64 bg-stone-300 dark:bg-stone-800 p-6 space-y-6 transform -translate-x-full md:translate-x-0 transition-transform duration-200 ease-in-out">
<div class="flex items-center justify-between">
<h2 class="text-2xl font-bold text-stone-800 dark:text-stone-200">Navigation</h2>
<!-- Mobile toggle (hidden on md and up) -->
<button class="text-stone-800 dark:text-stone-200 md:hidden">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
</div>
<nav class="text-stone-700 dark:text-stone-300">
<ul class="space-y-4">
<li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">Home</a></li>
<li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">Articles</a></li>
<li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">Categories</a></li>
<li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">About</a></li>
<li><a href="#" class="block hover:bg-stone-400 dark:hover:bg-stone-700 p-2 rounded transition duration-150 ease-in-out">Contact</a></li>
</ul>
</nav>
</div>
<!-- Content area -->
<div class="flex-1 p-10 overflow-y-auto">
<h1 class="text-3xl font-bold text-stone-800 dark:text-stone-200 mb-6">Main Content Area</h1>
<p class="text-stone-700 dark:text-stone-300">
This is the main content area. The sidebar is on the left.
</p>
<!-- Example content -->
<div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="bg-stone-200 dark:bg-stone-700 p-6 rounded">
<h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-4">Article Title 1</h3>
<img src="https://picsum.photos/seed/article1/400/200" alt="Article image" class="w-full h-48 object-cover mb-4">
<p class="text-stone-700 dark:text-stone-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="bg-stone-200 dark:bg-stone-700 p-6 rounded">
<h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-4">Article Title 2</h3>
<img src="https://picsum.photos/seed/article2/400/200" alt="Article image" class="w-full h-48 object-cover mb-4">
<p class="text-stone-700 dark:text-stone-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</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.
Composant de navigation dans la barre latérale
Un composant de navigation dans la barre latérale conçu pour les blogs, conçu avec des éléments 3D et des couleurs vives. Prend en charge le mode sombre et est réactif, avec une mise en page simple adaptée à la consommation de contenu.
Composant de navigation dans la barre latérale
Un composant de navigation de barre latérale réactif avec des éléments de conception 3D, une palette de couleurs analogue et une complexité moyenne avec des fonctionnalités interactives. Convient aux blogs ou aux sites Web de contenu.