Barra laterale

Barra laterale pastello scheumorfo

Un componente della barra laterale semplice e reattivo con design Skeuomorphic e colori pastello, adatto per un blog o un sito di contenuti. Include il supporto per la modalità oscura.

Apri anteprima

                <div class="flex flex-col h-screen bg-gray-200 dark:bg-gray-800">
  <div class="flex items-center justify-center h-16 bg-gray-300 dark:bg-gray-700 shadow-md">
    <span class="text-lg font-semibold text-gray-700 dark:text-gray-200">Blog Menu</span>
  </div>
  <nav class="flex-grow p-4">
    <ul class="space-y-2">
      <li>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
          Home
        </a>
      </li>
      <li>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
          About
        </a>
      </li>
      <li>
        <a href="#" class="block py-2 px-4 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-700 active:bg-gray-400 dark:active:bg-gray-600">
          Contact
        </a>
      </li>
    </ul>
  </nav>
</div>

Componente della barra laterale

Un componente reattivo della barra laterale progettato con l'effetto Glassmorphism e una combinazione di colori complementari, adatto per un blog o per il consumo di contenuti.

Apri anteprima

                <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>

Componente della barra laterale

Un componente della barra laterale reattivo progettato in uno stile retrò/vintage con colori vivaci per un layout del cruscotto. Include il supporto per la modalità oscura.

Apri anteprima

                <div class="flex flex-col w-64 h-screen p-4 bg-blue-600 text-white dark:bg-blue-900">
    <h2 class="text-2xl font-bold mb-6 text-yellow-500">Dashboard</h2>
    <div class="flex flex-col space-y-4">
        <a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Home</a>
        <a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Reports</a>
        <a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Analytics</a>
        <a href="#" class="p-2 hover:bg-yellow-500 hover:text-black rounded-md transition">Settings</a>
    </div>
    <div class="mt-auto pt-4 border-t border-gray-300 dark:border-gray-700">
        <div class="flex items-center space-x-2">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
            <span class="text-sm font-semibold">John Doe</span>
        </div>
    </div>
</div>

Barra laterale per l'e-commerce

Barra laterale Glassmorphism reattiva per l'e-commerce con modalità scura

Apri anteprima

                <div class="flex h-screen bg-gray-200 dark:bg-gray-900">

    <!-- Glassmorphism Sidebar -->
    <div class="w-64 px-2 py-6 bg-white bg-opacity-30 backdrop-filter backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-30 dark:backdrop-filter dark:backdrop-blur-lg">
        <div class="flex items-center justify-center">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-white">E-Store</h2>
        </div>
        <nav class="mt-10">
            <a href="#" class="flex items-center px-4 py-2 text-gray-700 transform rounded-md dark:text-gray-200 hover:bg-gray-200 hover:bg-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-50">
                <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 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7M19 10v10a1 1 0 01-1 1h-3m-2-7a4 4 0 11-8 0 4 4 0 018 0z"></path></svg>
                Home
            </a>

            <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 transform rounded-md dark:text-gray-200 hover:bg-gray-200 hover:bg-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-50">
                 <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="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
                Products
            </a>

            <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 transform rounded-md dark:text-gray-200 hover:bg-gray-200 hover:bg-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-50">
                <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>
                Cart
            </a>

             <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-700 transform rounded-md dark:text-gray-200 hover:bg-gray-200 hover:bg-opacity-50 dark:hover:bg-gray-700 dark:hover:bg-opacity-50">
                 <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="M10.325 4.317c1.03-.523 2.165-.943 3.356-.943 1.224 0 2.424.42 3.451.923L15.172 21H12v-3a3 3 0 00-3-3H5s.5-2 2-3c2.104-1.992 3.413-3.97 4.613-5.648l-.765-.765z"></path></svg>
                Wishlist
            </a>

        </nav>
    </div>

    <!-- Main Content Area (can be added here) -->
    <div class="flex-1 p-10">
        <!-- Your main content goes here -->
    </div>

</div>

Barra laterale dello scheumorfismo

Un componente della barra laterale reattivo con design Skeuomorphism e supporto per la modalità oscura utilizzando Tailwind CSS.

Apri anteprima

                <div class="flex h-screen bg-gray-200 dark:bg-gray-800">
  <!-- Sidebar -->
  <div class="flex flex-col w-64 bg-white dark:bg-gray-900 rounded-lg shadow-xl m-4">
    <div class="flex items-center justify-center h-20 shadow-inner bg-gray-100 dark:bg-gray-700 rounded-t-lg">
      <svg class="h-10 w-10 text-gray-600 dark:text-gray-300" 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="M4 6h16M4 12h16M4 18h16"></path></svg>
      <span class="text-2xl font-bold text-gray-700 dark:text-gray-200 ml-2">SkeuoSidebar</span>
    </div>
    <div class="flex flex-col flex-1 overflow-y-auto">
      <nav class="flex-1 px-2 py-4 bg-gray-50 dark:bg-gray-800">
        <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md shadow-inner mb-2">
          <svg class="h-6 w-6 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 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m0 0l7 7M19 10v10a1 1 0 01-1 1h-3m-2-7v7m-7-7v7"></path></svg>
          Dashboard
        </a>
        <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md shadow-inner mb-2">
          <svg class="h-6 w-6 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="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-8m8 0h-5m0 0v5m0-5h3"></path></svg>
          Projects
        </a>
        <a href="#" class="flex items-center px-4 py-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md shadow-inner mb-2">
          <svg class="h-6 w-6 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="M12 4.354a4 4 0 110 5.292M12 20.707v-6.98m0 0a7 7 0 00-7-7h-2a7 7 0 007 7m2 0h2a7 7 0 017-7h2a7 7 0 01-7 7m0 0v6.98m0 0a7 7 0 01-7 7h-2a7 7 0 017-7m2 0h2a7 7 0 007 7h2a7 7 0 00-7-7"></path></svg>
          Settings
        </a>
      </nav>
    </div>
    <div class="flex items-center justify-center h-20 shadow-inner bg-gray-100 dark:bg-gray-700 rounded-b-lg mt-auto ">
      <img class="h-10 w-10 rounded-full border-2 border-gray-300 shadow-md" src="https://randomuser.me/api/portraits/men/80.jpg" alt="Avatar">
      <span class="text-gray-700 dark:text-gray-200 ml-2">John Doe</span>
    </div>
  </div>
  <!-- Page Content (Placeholder) -->
  <div class="flex-1 p-10 text-2xl font-bold text-gray-600 dark:text-gray-300">
    Main Content Goes Here
  </div>
</div>

Componente della barra laterale

Un componente della barra laterale reattivo che utilizza Tailwind CSS, con i principi di Material Design e il supporto del tema scuro. Include un'intestazione con un logo e un titolo e un menu di navigazione con collegamenti.

Apri anteprima

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Sidebar -->
  <div class="sidebar w-64 bg-white dark:bg-gray-800 shadow-md">
    <div class="sidebar-header flex items-center justify-center h-16 border-b dark:border-gray-700">
      <img src="https://picsum.photos/40" alt="Logo" class="w-10 h-10 rounded-full">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white ml-3">My App</h2>
    </div>
    <div class="sidebar-nav mt-4">
      <ul>
        <li>
          <a href="#" class="flex items-center py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">
            <svg class="w-5 h-5 mr-3" 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="M4 6h16M4 10h16M4 14h16M4 18h16"></path></svg>
            Dashboard
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">
            <svg class="w-5 h-5 mr-3" 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 4v16m8-8H4"></path></svg>
            Settings
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center py-2 px-4 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700">
            <svg class="w-5 h-5 mr-3" 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>
            Profile
          </a>
        </li>
      </ul>
    </div>
  </div>
  <!-- Page Content (Placeholder) -->
  <div class="flex-1 p-6">
    <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Main Content Area</h1>
    <p class="mt-4 text-gray-700 dark:text-gray-300">This is where your main page content goes.</p>
  </div>
</div>

Componente della barra laterale

Un componente reattivo della barra laterale progettato con lo stile Neumorphism utilizzando Tailwind CSS. Presenta un aspetto morbido dell'interfaccia utente con ombre sottili, supporta la modalità oscura e include immagini segnaposto e avatar.

Apri anteprima

                <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>

Barra laterale del neumorfismo

Un componente della barra laterale in stile Neumorphism con design reattivo e supporto per temi scuri utilizzando Tailwind CSS.

Apri anteprima

                <div class="flex h-screen bg-gray-200 dark:bg-gray-800">

  <!-- Sidebar -->
  <div class="flex flex-col w-64 bg-gray-200 dark:bg-gray-800 rounded-2xl shadow-neumorphism dark:shadow-neumorphism-dark m-4">
    <div class="flex items-center justify-center h-16 mt-8">
      <div class="h-12 w-12 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphism-inset dark:shadow-neumorphism-dark-inset flex items-center justify-center">
        <svg class="h-6 w-6 text-gray-600 dark:text-gray-300" 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="M4 6h16M4 12h16M4 18h7"></path></svg>
      </div>
    </div>
    <div class="mt-8">
      <nav>
        <a href="#" class="flex items-center px-6 py-3 text-gray-700 dark:text-gray-200 block hover:bg-gray-300 dark:hover:bg-gray-700 rounded-xl mx-4 shadow-neumorphism dark:shadow-neumorphism-dark mb-4">
          <svg class="h-6 w-6 mr-3" 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 7M19 10v10a1 1 0 01-1 1h-3m-2-7h-4m0 0l-4-4m4 4l4 4"></path></svg>
          Home
        </a>
        <a href="#" class="flex items-center px-6 py-3 text-gray-700 dark:text-gray-200 block hover:bg-gray-300 dark:hover:bg-gray-700 rounded-xl mx-4 shadow-neumorphism dark:shadow-neumorphism-dark mb-4">
          <svg class="h-6 w-6 mr-3" 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="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path></svg>
          Services
        </a>
        <a href="#" class="flex items-center px-6 py-3 text-gray-700 dark:text-gray-200 block hover:bg-gray-300 dark:hover:bg-gray-700 rounded-xl mx-4 shadow-neumorphism dark:shadow-neumorphism-dark mb-4">
          <svg class="h-6 w-6 mr-3" 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>
          About
        </a>
        <a href="#" class="flex items-center px-6 py-3 text-gray-700 dark:text-gray-200 block hover:bg-gray-300 dark:hover:bg-gray-700 rounded-xl mx-4 shadow-neumorphism dark:shadow-neumorphism-dark mb-4">
          <svg class="h-6 w-6 mr-3" 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 8m-18 4v4a2 2 0 002 2h14a2 2 0 002-2v-4"></path></svg>
          Contact
        </a>
      </nav>
    </div>
    <div class="mt-auto mb-8">
      <div class="flex items-center justify-center">
        <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphism-inset dark:shadow-neumorphism-dark-inset mr-3">
        <div class="text-gray-700 dark:text-gray-200">
          John Doe
        </div>
      </div>
    </div>
  </div>

  <!-- Content area (can be added here) -->
  <div class="flex-1 p-8">
    <!-- Your content goes here -->
  </div>

</div>

<style>
  .shadow-neumorphism {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .dark .shadow-neumorphism-dark {
    box-shadow: 7px 7px 15px #414141, -7px -7px 15px #b9b9b9;
  }
  .shadow-neumorphism-inset {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
  }
  .dark .shadow-neumorphism-dark-inset {
    box-shadow: inset 5px 5px 10px #414141, inset -5px -5px 10px #b9b9b9;
  }
</style>

Barra laterale Glassmorphism con modalità scura

Un componente della barra laterale reattiva con design glassmorphism e supporto per la modalità oscura utilizzando Tailwind CSS. Include un logo, il nome del sito, i link di navigazione e la sezione del profilo utente.

Apri anteprima

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <!-- Glassmorphism Sidebar -->
  <div class="flex flex-col w-64 bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg dark:backdrop-blur-lg shadow-xl dark:shadow-2xl">
    <div class="flex items-center justify-center h-16">
      <!-- Logo and Site Name -->
      <img src="https://picsum.photos/40/40" alt="Logo" class="rounded-full mr-2">
      <span class="text-gray-800 dark:text-white text-lg font-semibold">AppName</span>
    </div>
    <div class="flex flex-col flex-1 overflow-y-auto">
      <nav class="flex-1 px-2 py-4">
        <!-- Navigation Links -->
        <a href="#" class="flex items-center px-4 py-2 text-gray-600 dark:text-gray-200 hover:bg-white hover:bg-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 rounded-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <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 1H9m2-13V9a1 1 0 011-1h2a1 1 0 011 1v3m-7 7h7"></path>
          </svg>
          Dashboard
        </a>
        <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-600 dark:text-gray-200 hover:bg-white hover:bg-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 rounded-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M12 20.646A17.938 17.938 0 015 10H4c0 2.761 3.582 5 8 5s8-2.239 8-5h-1c-7.033 0-10.95.51-11.297 1.702l-.155.595A1.99 1.99 0 015 15l-.155.595A1.99 1.99 0 008 19.646z"></path>
          </svg>
          Users
        </a>
        <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-600 dark:text-gray-200 hover:bg-white hover:bg-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 rounded-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <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 7v-4"></path>
          </svg>
          Products
        </a>
        <a href="#" class="flex items-center px-4 py-2 mt-2 text-gray-600 dark:text-gray-200 hover:bg-white hover:bg-opacity-40 dark:hover:bg-gray-700 dark:hover:bg-opacity-40 rounded-md">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c1.03-.523 2.175-.956 3.402-.956C15.463 3.361 17.5 5.252 17.5 7.5c0 2.249-2.037 4.138-4.275 4.138C11.215 11.638 10 10.457 10 8.952c0-1.486 1.184-2.652 2.618-2.652a4.06 4.06 0 013.162 1.4zM2.875 18.25h-.32C1.918 18.25 2 18.11 2 17.75c0-1.376 2.13-2.875 4.95-2.875 1.678 0 3.074.406 3.99-.94.791-1.223 2.093-1.844 3.455-1.844A5.42 5.42 0 0120.5 15.25c0 2.892-4.243 5.25-9.25 5.25-3.095 0-5.732-.919-7.166-2.42l-.224-.224z"></path>
          </svg>
          Settings
        </a>
      </nav>
    </div>
    <!-- User Profile Section -->
    <div class="flex items-center p-4 border-t border-gray-300 dark:border-gray-700">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full h-10 w-10 mr-3">
      <div class="flex flex-col">
        <span class="text-gray-800 dark:text-white text-sm font-semibold">John Doe</span>
        <span class="text-gray-600 dark:text-gray-400 text-sm">[email protected]</span>
      </div>
    </div>
  </div>
  <!-- Main Content (optional - for demonstration) -->
  <div class="flex flex-col flex-1 p-4 overflow-y-auto">
    <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Main Content Area</h1>
    <p class="mt-4 text-gray-700 dark:text-gray-300">This is the main content area. The sidebar is positioned to the left.</p>
  </div>
</div>

Componente della barra laterale

Un componente della barra laterale progettato con uno stile scheumorfico che offre una sensazione del mondo reale in un formato digitale. Supporta un design reattivo e un tema scuro.

Apri anteprima

                <div class="flex flex-col h-screen bg-white dark:bg-gray-800 shadow-lg rounded-lg w-64">
    <div class="flex items-center justify-center h-16 bg-gray-200 dark:bg-gray-700 rounded-t-lg">
        <h1 class="text-xl font-bold text-gray-800 dark:text-white">Sidebar</h1>
    </div>
    <div class="flex-grow overflow-y-auto p-4">
        <ul class="space-y-2">
            <li>
                <a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3" />
                    <span>Profile</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                    <img src="https://picsum.photos/40/40?random=1" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
                    <span>Dashboard</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                    <img src="https://picsum.photos/40/40?random=2" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
                    <span>Settings</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                    <img src="https://picsum.photos/40/40?random=3" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
                    <span>Messages</span>
                </a>
            </li>
            <li>
                <a href="#" class="flex items-center p-3 text-gray-600 rounded-lg hover:bg-gray-300 dark:text-gray-300 dark:hover:bg-gray-600 transition ease-in-out duration-150">
                    <img src="https://picsum.photos/40/40?random=4" alt="Placeholder" class="w-10 h-10 rounded mr-3" />
                    <span>Logout</span>
                </a>
            </li>
        </ul>
    </div>
</div>

Categorie