Composant de la barre latérale
Un composant de barre latérale réactif conçu avec l’effet Glassmorphism et une palette de couleurs complémentaire, adapté à un blog ou à la consommation de contenu.
HTML Code
<aside class="bg-white bg-opacity-30 backdrop-blur-lg shadow-md rounded-lg p-4 w-64 dark:bg-gray-800 dark:bg-opacity-30">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">User Name</h2>
</div>
<nav>
<ul class="space-y-2">
<li>
<a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Home</a>
</li>
<li>
<a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">About</a>
</li>
<li>
<a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Blog</a>
</li>
<li>
<a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Contact</a>
</li>
</ul>
</nav>
<div class="mt-4">
<h3 class="text-md font-semibold text-gray-800 dark:text-white">Featured Posts</h3>
<ul class="space-y-2">
<li>
<a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 1</a>
</li>
<li>
<a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 2</a>
</li>
<li>
<a href="#" class="block px-3 py-2 rounded-md text-gray-900 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 transition">Post Title 3</a>
</li>
</ul>
</div>
<div class="mt-4">
<img src="https://picsum.photos/300/200" alt="Sample Image" class="rounded-lg shadow-md">
</div>
</aside>Composants associés
Composant de la barre latérale Neumorphism
Un composant de barre latérale réactif avec un design Neumorphism, une palette de couleurs Earth tones et une complexité simple, adapté aux blogs ou à la consommation de contenu. Inclut la prise en charge du mode sombre.
Neumorphic_Sidebar_Component
Un composant de barre latérale simple, réactif et neumorphe pour les sites Web d’entreprise/d’entreprise avec des couleurs complémentaires et la prise en charge du mode sombre.
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.