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
Glassmorphism Sidebar Navigation Component
Un composant de navigation de la barre latérale de style Glassmorphism pour les blogs, avec une palette de couleurs monochromatiques. Il s’agit d’un design simple et réactif avec prise en charge du mode sombre, utilisant uniquement HTML et Tailwind CSS. La barre latérale comprend un titre de site, des liens de navigation et une section de profil.
Composant de navigation dans la barre latérale
Un composant de navigation de barre latérale réactif stylisé de manière skeuomorphique avec prise en charge du thème sombre à l’aide de Tailwind CSS.
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.