Barre latérale pastel skeuomorphe
Un composant de barre latérale simple et réactif avec un design Skeuomorphic et des couleurs pastel, adapté à un blog ou à un site de contenu. Inclut la prise en charge du mode sombre.
HTML Code
<div class="flex flex-col h-screen bg-gray-200 dark:bg-gray-800">
<div class="flex items-center justify-center h-16 bg-gray-300 dark:bg-gray-700 shadow-md">
<span class="text-lg font-semibold text-gray-700 dark:text-gray-200">Blog Menu</span>
</div>
<nav class="flex-grow p-4">
<ul class="space-y-2">
<li>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
Home
</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
About
</a>
</li>
<li>
<a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
Contact
</a>
</li>
</ul>
</nav>
</div>Composants associés
Barre latérale de blog simple et dynamique
Un composant de barre latérale simple et réactif pour le contenu du blog, conçu avec des couleurs vives et une sensation de matériau à l’aide de Tailwind CSS. Comprend des liens de navigation et une section de profil utilisateur. Prend en charge le mode sombre à l’aide du préfixe dark : de Tailwind. Fixé sur les grands écrans, caché sur les petits écrans.
Composant de la barre latérale
Un composant de barre latérale complexe, réactif, de style Glassmorphism pour un tableau de bord, avec des tons de terre et la prise en charge du mode sombre.
Composant de la barre latérale
Un composant de barre latérale réactif utilisant Tailwind CSS, avec les principes de conception matérielle et la prise en charge du thème sombre. Comprend un en-tête avec un logo et un titre, ainsi qu’un menu de navigation avec des liens.