Barre latérale

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.

Ouvrir l’aperçu

                <div class="flex h-screen bg-stone-100 dark:bg-stone-900">
  <!-- Sidebar -->
  <div class="flex flex-col w-64 bg-white/30 dark:bg-stone-800/30 backdrop-blur-lg p-4 shadow-lg md:flex">
    <div class="text-2xl font-semibold text-stone-800 dark:text-stone-100 mb-6">Dashboard</div>
    <nav class="flex-1 space-y-2">
      <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-stone-700 dark:text-stone-200 hover:bg-white/50 dark:hover:bg-stone-700/50 transition duration-200">
        <svg class="h-5 w-5" 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 0l-7 7m7-7v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001 1h2a1 1 0 001-1v-3m-6 0h6"></path></svg>
        <span>Home</span>
      </a>
      <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-stone-700 dark:text-stone-200 hover:bg-white/50 dark:hover:bg-stone-700/50 transition duration-200">
        <svg class="h-5 w-5" 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 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 012-2h2a2 2 0 012 2v1m-4 0h3m-3 0h-3"></path></svg>
        <span>Analytics</span>
      </a>
      <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-stone-700 dark:text-stone-200 hover:bg-white/50 dark:hover:bg-stone-700/50 transition duration-200">
        <svg class="h-5 w-5" 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="M12 4.354a4 4 0 110 5.292M12 20.354a4 4 0 110-5.292M12 14.354a4 4 0 110 5.292M12 8.354a4 4 0 110 5.292"></path></svg>
        <span>Reports</span>
      </a>
      <a href="#" class="flex items-center space-x-3 p-3 rounded-lg text-stone-700 dark:text-stone-200 hover:bg-white/50 dark:hover:bg-stone-700/50 transition duration-200">
        <svg class="h-5 w-5" 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"></path></svg>
        <span>Users</span>
      </a>
    </nav>
    <div class="mt-6 flex items-center space-x-3 p-3 rounded-lg bg-white/40 dark:bg-stone-700/40">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
      <div>
        <p class="font-medium text-stone-800 dark:text-stone-100">John Doe</p>
        <a href="#" class="text-sm text-stone-600 dark:text-stone-300 hover:underline">View Profile</a>
      </div>
    </div>
  </div>

  <!-- Main Content (for demonstration purposes) -->
  <div class="flex-1 p-8 overflow-y-auto">
    <h1 class="text-3xl font-bold text-stone-800 dark:text-stone-100 mb-6">Dashboard Overview</h1>
    <p class="text-stone-700 dark:text-stone-200">This is the main content area. The sidebar is a Glassmorphism-styled component with earth tones and dark mode support.</p>
    <div class="mt-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div class="bg-white/30 dark:bg-stone-800/30 backdrop-blur-lg p-6 rounded-lg shadow-lg">
        <h2 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4">Card 1</h2>
        <p class="text-stone-700 dark:text-stone-200">Some content for card 1. This demonstrates a typical content area next to the sidebar.</p>
      </div>
      <div class="bg-white/30 dark:bg-stone-800/30 backdrop-blur-lg p-6 rounded-lg shadow-lg">
        <h2 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4">Card 2</h2>
        <p class="text-stone-700 dark:text-stone-200">More content for card 2. The design uses natural colors and provides a rich interface.</p>
      </div>
      <div class="bg-white/30 dark:bg-stone-800/30 backdrop-blur-lg p-6 rounded-lg shadow-lg">
        <h2 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4">Card 3</h2>
        <p class="text-stone-700 dark:text-stone-200">Final card content. The responsive design adapts to different screen sizes.</p>
      </div>
    </div>
  </div>
</div>

Composant de la barre latérale

Un composant de barre latérale réactif et minimaliste pour le commerce électronique, avec prise en charge du mode sombre. Il présente une mise en page simple avec des catégories de produits et une icône de panier.

Ouvrir l’aperçu

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Sidebar -->
  <div class="w-64 bg-white dark:bg-gray-800 shadow-md p-4">
    <div class="text-2xl font-semibold text-gray-800 dark:text-white mb-6">Shop</div>
    <nav>
      <ul class="space-y-4">
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Categories</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">New Arrivals</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Best Sellers</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Sale</a></li>
      </ul>
    </nav>
    <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
      <a href="#" class="flex items-center text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
        <svg class="w-5 h-5 mr-2" 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 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
        Shopping Cart
      </a>
    </div>
  </div>

  <!-- Main content area (for context) -->
  <div class="flex-1 p-8">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-6">Welcome to our Shop</h1>
    <p class="text-gray-700 dark:text-gray-300">Select a category from the sidebar to start shopping.</p>
  </div>
</div>

Composant de la barre latérale

Un composant de barre latérale réactif pour un portfolio, avec un style de conception 3D avec un thème sombre, adapté à la présentation de travaux ou de produits, avec quelques éléments interactifs et une palette de couleurs analogue.

Ouvrir l’aperçu

                <aside class="bg-gray-800 dark:bg-gray-900 w-64 h-screen shadow-lg transform transition-transform duration-300 relative hover:translate-x-1 hover:shadow-2xl">
    <div class="flex items-center justify-center h-16 border-b border-gray-700 dark:border-gray-600">
        <h1 class="text-white text-lg font-bold">My Portfolio</h1>
    </div>
    <nav class="flex flex-col p-4">
        <a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>Home</span>
        </a>
        <a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>About</span>
        </a>
        <a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>Projects</span>
        </a>
        <a href="#" class="flex items-center p-2 mb-2 text-gray-300 rounded hover:bg-gray-700 dark:hover:bg-gray-800 transition">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2">
            <span>Contact</span>
        </a>
    </nav>
    <footer class="absolute bottom-0 left-0 w-full border-t border-gray-700 dark:border-gray-600 p-4">
        <p class="text-gray-500 text-sm text-center">© 2023 My Portfolio</p>
    </footer>
</aside>

Composant de la barre latérale

Un composant de barre latérale réactif pour présenter des éléments de portefeuille avec des micro-interactions attrayantes et une palette de couleurs complémentaires, prenant en charge le mode sombre.

Ouvrir l’aperçu

                <aside class="w-64 h-full bg-white dark:bg-gray-800 shadow-lg transition-transform duration-300 ease-in-out transform hover:scale-105">  
    <div class="p-4">    
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Portfolio</h2>    
        <div class="mt-4">            
            <a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Home</a>            
            <a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Projects</a>            
            <a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">About Me</a>            
            <a href="#" class="block py-2 text-gray-600 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">Contact</a>        
        </div>  
    </div>  
    <div class="flex flex-col items-center px-4 py-4">    
        <img src="https://picsum.photos/80/80" alt="Portfolio Avatar" class="rounded-full border-2 border-blue-500 dark:border-blue-400 mb-2" />    
        <h3 class="text-lg font-medium text-gray-800 dark:text-white">John Doe</h3>    
        <p class="text-sm text-gray-600 dark:text-gray-400">Web Developer</p>  
    </div>  
</aside>

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.

Ouvrir l’aperçu

                <!-- Sidebar Component -->
<div class="hidden lg:block w-64 bg-purple-600 text-white dark:bg-purple-800 dark:text-yellow-200 h-screen fixed top-0 left-0 p-5 space-y-6">
    <!-- Sidebar Header -->
    <div class="flex items-center space-x-3">
        <svg class="w-8 h-8 text-yellow-300 dark:text-yellow-100" 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="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9m2 10V7a2 2 0 00-2-2h-1C9 4 7 2 5 2c-2 0-3 1.5-3 3v15a1 1 0 001 1h16z"></path></svg>
        <span class="text-2xl font-semibold text-yellow-300 dark:text-yellow-100">Blog Name</span>
    </div>

    <!-- Navigation -->
    <nav class="space-y-2">
        <a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
            Home
        </a>
        <a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
            Categories
        </a>
        <a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
            Popular
        </a>
        <a href="#" class="block py-2 px-3 rounded transition duration-200 hover:bg-purple-700 dark:hover:bg-purple-900 text-white dark:text-yellow-200 hover:text-yellow-300 dark:hover:text-yellow-100">
            About
        </a>
    </nav>

    <!-- User Profile (Optional) - Position at bottom -->
    <div class="absolute bottom-5 left-5 right-5">
         <div class="flex items-center space-x-3 p-3 bg-purple-700 dark:bg-purple-900 rounded">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/thumb/women/44.jpg" alt="User Avatar">
            <div class="flex flex-col">
                <span class="font-semibold text-yellow-200 dark:text-yellow-100 text-sm">Jane Doe</span>
                <span class="text-xs text-purple-200 dark:text-purple-300">View Profile</span>
            </div>
        </div>
    </div>
</div>

Composant de la barre latérale

Un composant de barre latérale simple et réactif avec un design brutaliste, une palette de couleurs monochromatiques et une prise en charge du mode sombre.

Ouvrir l’aperçu

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Sidebar -->
  <div class="w-64 bg-gray-800 text-white dark:bg-gray-950 dark:text-gray-200 flex flex-col">
    <div class="p-6 text-2xl font-bold border-b border-gray-700 dark:border-gray-800">BrutalNav</div>
    <nav class="flex-grow">
      <a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">Home</a>
      <a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">About</a>
      <a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">Services</a>
      <a href="#" class="block py-2 px-6 text-gray-300 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-800 dark:hover:text-gray-100 transition duration-200">Contact</a>
    </nav>
  </div>

  <!-- Content Area (placeholder) -->
  <div class="flex-grow p-10 text-gray-800 dark:text-gray-200">
    <h1 class="text-3xl font-bold mb-6">Main Content</h1>
    <p>This is the main content area. The sidebar is on the left.</p>
  </div>
</div>

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.

Ouvrir l’aperçu

                <div class="flex h-screen bg-gray-200 dark:bg-gray-800">
  <!-- Sidebar -->
  <div class="w-64 bg-gray-300 dark:bg-gray-700 p-6 space-y-6 shadow-neumorphic-light dark:shadow-neumorphic-dark">
    <!-- Logo or Blog Title -->
    <div class="text-2xl font-bold text-gray-800 dark:text-white">My Blog</div>
    
    <!-- Navigation -->
    <nav>
      <a href="#" class="block py-2 px-4 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-400 dark:hover:bg-gray-600 hover:text-gray-800 dark:hover:text-white shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">Home</a>
      <a href="#" class="block py-2 px-4 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-400 dark:hover:bg-gray-600 hover:text-gray-800 dark:hover:text-white shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">About</a>
      <a href="#" class="block py-2 px-4 rounded-lg text-gray-600 dark:text-gray-300 hover:bg-gray-400 dark:hover:bg-gray-600 hover:text-gray-800 dark:hover:text-white shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">Contact</a>
    </nav>

    <!-- Categories or other links -->
    <div class="space-y-2">
      <div class="text-sm font-semibold text-gray-600 dark:text-gray-300">Categories</div>
      <a href="#" class="block py-1 text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Technology</a>
      <a href="#" class="block py-1 text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Travel</a>
      <a href="#" class="block py-1 text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-white">Food</a>
    </div>
  </div>

  <!-- Main Content Area (optional - just for demonstration) -->
  <div class="flex-1 p-6 overflow-y-auto">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">Welcome to the Blog</h1>
    <p class="text-gray-700 dark:text-gray-300">This is the main content area. The sidebar is on the left.</p>
  </div>
</div>

<!-- Add custom CSS for Neumorphism effect -- In a separate CSS file or style tag -->
<style>
.shadow-neumorphic-light {
  box-shadow: 7px 7px 15px #a7acb1, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphic-dark {
  box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #323232;
}
.shadow-neumorphic-inset-light {
  box-shadow: inset 5px 5px 10px #a7acb1, inset -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-inset-dark {
  box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #323232;
}
</style>

Composant de barre latérale rétro

Un composant de barre latérale réactif avec un design rétro/vintage pour présenter du travail ou des produits, utilisant une palette de couleurs en niveaux de gris et des classes CSS Tailwind, prenant en charge le mode sombre.

Ouvrir l’aperçu

                <div class="flex flex-col h-screen bg-white dark:bg-gray-800">
    <div class="flex items-center justify-center p-4 bg-gray-200 dark:bg-gray-700">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white">My Portfolio</h1>
    </div>
    <div class="flex-grow p-4">
        <div class="flex flex-col space-y-4">
            <a href="#" class="flex items-center p-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition ease-in-out duration-200">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-700 dark:text-gray-200">Home</span>
            </a>
            <a href="#" class="flex items-center p-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition ease-in-out duration-200">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-700 dark:text-gray-200">About</span>
            </a>
            <a href="#" class="flex items-center p-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition ease-in-out duration-200">
                <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-700 dark:text-gray-200">Projects</span>
            </a>
            <a href="#" class="flex items-center p-2 bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500 transition ease-in-out duration-200">
                <img src="https://randomuser.me/api/portraits/men/4.jpg" alt="User" class="w-10 h-10 rounded-full mr-2">
                <span class="text-gray-700 dark:text-gray-200">Contact</span>
            </a>
        </div>
    </div>
    <div class="p-4 text-center bg-gray-200 dark:bg-gray-700">
        <p class="text-gray-600 dark:text-gray-300">© 2023 My Portfolio. All rights reserved.</p>
    </div>
</div>

Composant de la barre latérale

Un composant de barre latérale réactif conçu pour les applications de commerce électronique avec des éléments de conception matérielle et une palette de couleurs pastel, avec prise en charge du mode sombre.

Ouvrir l’aperçu

                <aside class="bg-white dark:bg-gray-800 h-full w-64 p-5 shadow-lg  transition-transform duration-300 transform lg:translate-x-0 lg:fixed lg:left-0 lg:top-0 lg:h-full">
    <div class="flex items-center mb-5">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <h2 class="ml-3 text-gray-800 dark:text-white font-semibold">User Name</h2>
    </div>
    <nav>
        <ul>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Home</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Shop</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Orders</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Wishlist</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Profile</a>
            </li>
            <li class="mb-3">
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Settings</a>
            </li>
            <li>
                <a class="block p-2 rounded transition-colors duration-200 hover:bg-pink-100 dark:hover:bg-gray-700" href="#">Logout</a>
            </li>
        </ul>
    </nav>
    <div class="mt-5">
        <h3 class="text-gray-600 dark:text-gray-400 font-semibold">Featured Products</h3>
        <div class="mt-3">
            <img class="w-full h-24 object-cover rounded-lg shadow-md" src="https://picsum.photos/200/100?random=1" alt="Product 1">
            <img class="w-full h-24 object-cover rounded-lg shadow-md mt-2" src="https://picsum.photos/200/100?random=2" alt="Product 2">
        </div>
    </div>
</aside>

Composant de la barre latérale

Un composant de barre latérale de style Glassmorphism avec une palette de couleurs complémentaire, conçu pour un site web de portfolio avec une complexité modérée. Il est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS.

Ouvrir l’aperçu

                <div class="flex h-screen bg-gray-200 dark:bg-gray-900">
  <!-- Sidebar -->
  <div class="w-64 bg-white dark:bg-gray-800 p-6 space-y-6 transform -translate-x-full md:translate-x-0 transition duration-200 ease-in-out">
    <!-- Glassmorphism Effect -->
    <div class="absolute inset-0 bg-blue-500 bg-opacity-20 backdrop-filter backdrop-blur-lg rounded"></div>
    
    <!-- Sidebar Content -->
    <div class="relative z-10">
      <div class="flex items-center space-x-2">
        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">John Doe</h2>
      </div>
      <nav class="mt-8">
        <a href="#" class="flex items-center space-x-2 py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white rounded-md">
          <svg class="h-5 w-5" 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 1H6a1 1 0 01-1-1v-5a1 1 0 011-1h2"></path></svg>
          <span>Home</span>
        </a>
        <a href="#" class="flex items-center space-x-2 py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white rounded-md">
          <svg class="h-5 w-5" 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="M19 11H5m14 0a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2m14 0V9a2 2 0 00-2-2H7a2 2 0 00-2 2v2m7-7h.01"></path></svg>
          <span>Projects</span>
        </a>
        <a href="#" class="flex items-center space-x-2 py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white rounded-md">
          <svg class="h-5 w-5" 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 6H5a2 2 0 00-2 2v9a2 2 0 002 2h10a2 2 0 002-2V8a2 2 0 00-2-2h-5m0 0l2-2m-2 2l-2-2m7-3a2 2 0 11-4 0 2 2 0 014 0zM14 13h3m-3 3h3m-9-2h.01"></path></svg>
          <span>Blog</span>
        </a>
        <a href="#" class="flex items-center space-x-2 py-2 px-4 text-gray-700 dark:text-gray-300 hover:bg-blue-500 hover:text-white rounded-md">
          <svg class="h-5 w-5" 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 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
          <span>Contact</span>
        </a>
      </nav>
    </div>
  </div>

  <!-- Main Content -->
  <div class="flex-1 p-10">
    <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Welcome to my Portfolio</h1>
    <!-- Add your main content here -->
  </div>
</div>

Catégories