Composant de la barre latérale
Un composant de barre latérale réactif conçu avec le style Neumorphism à l’aide de Tailwind CSS. Il présente une interface utilisateur douce avec des ombres subtiles, prend en charge le mode sombre et comprend des images de remplacement et un avatar.
HTML Code
<div class="flex bg-gray-200 dark:bg-gray-800 h-screen">
<div class="w-64 h-full shadow-lg rounded-xl bg-gray-300 dark:bg-gray-700 p-4">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow-sm"/>
<h2 class="ml-3 text-xl font-semibold text-gray-800 dark:text-gray-100">User Name</h2>
</div>
<nav>
<ul>
<li class="my-2">
<a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Dashboard</a>
</li>
<li class="my-2">
<a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Profile</a>
</li>
<li class="my-2">
<a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Settings</a>
</li>
<li class="my-2">
<a href="#" class="block p-2 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-600 shadow-lg transition-all duration-200">Logout</a>
</li>
</ul>
</nav>
</div>
<div class="flex-1 p-10 bg-gray-100 dark:bg-gray-900">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Main Content</h1>
<img src="https://picsum.photos/500/300" alt="Placeholder" class="mt-4 rounded-lg shadow-md"/>
</div>
</div>Composants associés
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 la barre latérale conçu avec un style skeuomorphe qui donne une sensation du monde réel dans un format numérique. Il prend en charge le design réactif et un thème sombre.
Consulting_Sidebar_Dark_Candy_Complex
Un composant de barre latérale complexe et réactif pour le conseil/les services, doté d’une interface utilisateur en mode sombre avec des accents de couleurs bonbons/doux. Comprend la navigation, le profil de l’utilisateur et les liens rapides.