RetroPastelSocialBarre latérale
Un composant de navigation de la barre latérale simple et réactif avec un design rétro/vintage des années 80/90, des couleurs pastel et la prise en charge du mode sombre, conçu pour les interfaces de médias sociaux utilisant Tailwind CSS.
HTML Code
<div class="flex h-screen bg-gradient-to-b from-pink-200 to-purple-200 dark:from-gray-800 dark:to-gray-900">
<!-- Sidebar -->
<div class="w-64 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 p-6 space-y-6 transition-transform transform -translate-x-full md:translate-x-0 md:relative fixed inset-y-0 left-0 z-50">
<!-- Profile Section -->
<div class="flex items-center space-x-4">
<img class="h-12 w-12 rounded-full ring-2 ring-pink-400 dark:ring-purple-400" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
<div>
<h2 class="text-xl font-bold">Jane Doe</h2>
<p class="text-sm text-gray-500 dark:text-gray-400">@janedoe</p>
</div>
</div>
<nav class="space-y-2">
<a href="#" class="group flex items-center space-x-2 p-2 rounded-md hover:bg-pink-300 dark:hover:bg-purple-600 transition duration-200">
<svg class="h-5 w-5 text-pink-500 dark:text-purple-400 group-hover:text-white" 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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7m-2 2v5a1 1 0 01-1 1H9a1 1 0 01-1-1v-5m3-7v3"/></svg>
<span class="font-medium">Home</span>
</a>
<a href="#" class="group flex items-center space-x-2 p-2 rounded-md hover:bg-pink-300 dark:hover:bg-purple-600 transition duration-200">
<svg class="h-5 w-5 text-pink-500 dark:text-purple-400 group-hover:text-white" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.932 8-11 8a9.913 9.913 0 01-3.365-.686A2 2 0 015 20.5V17m-7-3h2m-2 4h2m4-2h2m-2 4h2"/></svg>
<span class="font-medium">Messages</span>
</a>
<a href="#" class="group flex items-center space-x-2 p-2 rounded-md hover:bg-pink-300 dark:hover:bg-purple-600 transition duration-200">
<svg class="h-5 w-5 text-pink-500 dark:text-purple-400 group-hover:text-white" 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0a6 6 0 00-6 0m6 0v1a3 3 0 01-3 3H9a3 3 0 01-3-3v-1"/></svg>
<span class="font-medium">Notifications</span>
</a>
<a href="#" class="group flex items-center space-x-2 p-2 rounded-md hover:bg-pink-300 dark:hover:bg-purple-600 transition duration-200">
<svg class="h-5 w-5 text-pink-500 dark:text-purple-400 group-hover:text-white" 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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/></svg>
<span class="font-medium">Profile</span>
</a>
<a href="#" class="group flex items-center space-x-2 p-2 rounded-md hover:bg-pink-300 dark:hover:bg-purple-600 transition duration-200">
<svg class="h-5 w-5 text-pink-500 dark:text-purple-400 group-hover:text-white" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/></svg>
<span class="font-medium">Settings</span>
</a>
</nav>
</div>
<!-- Content Area -->
<div class="flex-1 p-10">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-6">Main Content</h1>
<!-- Your content goes here -->
<p class="text-gray-700 dark:text-gray-300">This is where the main content of your page will be displayed.</p>
</div>
</div>Composants associés
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.
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.
RetroBarre latéraleNavigation
Un composant de navigation dans la barre latérale de style rétro/vintage avec des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.