Seitenleiste

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

              

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

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

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

                <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">john.doe@example.com</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>
              

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

                <div class="flex flex-col h-screen bg-gray-800 text-white p-4">
    <div class="flex items-center mb-6">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
        <h1 class="text-xl font-semibold">User Name</h1>
    </div>
    <nav class="flex-1">
        <ul>
            <li class="mb-4">
                <a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
                    <img src="https://picsum.photos/50/50" alt="Home Icon" class="w-6 h-6 mr-2">Home
                </a>
            </li>
            <li class="mb-4">
                <a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
                    <img src="https://picsum.photos/50/50" alt="Profile Icon" class="w-6 h-6 mr-2">Profile
                </a>
            </li>
            <li class="mb-4">
                <a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
                    <img src="https://picsum.photos/50/50" alt="Settings Icon" class="w-6 h-6 mr-2">Settings
                </a>
            </li>
            <li class="mb-4">
                <a href="#" class="flex items-center p-2 rounded hover:bg-gray-700 transition duration-300">
                    <img src="https://picsum.photos/50/50" alt="Logout Icon" class="w-6 h-6 mr-2">Logout
                </a>
            </li>
        </ul>
    </nav>
    <footer>
        <p class="text-gray-400 text-sm">© 2023 Your Company</p>
    </footer>
</div>
              

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900">
  <aside class="w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 shadow-lg transition-all duration-300 ease-in-out">
    <div class="px-6 py-4">
      <div class="flex items-center space-x-3 mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full" />
        <h1 class="text-xl font-semibold text-gray-800 dark:text-white">John Doe</h1>
      </div>
      <nav>
        <ul class="space-y-2">
          <li>
            <a href="#" class="block p-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition duration-200">Dashboard</a>
          </li>
          <li>
            <a href="#" class="block p-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition duration-200">Profile</a>
          </li>
          <li>
            <a href="#" class="block p-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition duration-200">Settings</a>
          </li>
          <li>
            <a href="#" class="block p-2 text-gray-700 dark:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition duration-200">Support</a>
          </li>
        </ul>
      </nav>
    </div>
  </aside>
  <main class="flex-grow p-6">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white">Welcome to your Dashboard</h2>
    <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
      <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
        <img src="https://picsum.photos/300/200" alt="Placeholder Image" class="w-full h-auto rounded-lg mb-2" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Section 1</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description about this section.</p>
      </div>
      <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
        <img src="https://picsum.photos/300/200" alt="Placeholder Image" class="w-full h-auto rounded-lg mb-2" />
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Section 2</h3>
        <p class="text-gray-600 dark:text-gray-300">Some description about this section.</p>
      </div>
    </div>
  </main>
</div>
              

                <div class="bg-gray-100 dark:bg-gray-800 h-screen w-64 shadow-lg p-5">
    <div class="flex items-center mb-6">
        <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white ml-3">Hello, User!</h1>
    </div>
    <ul class="space-y-4">
        <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=1" alt="Icon">
                <span class="text-gray-800 dark:text-white">Dashboard</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=2" alt="Icon">
                <span class="text-gray-800 dark:text-white">Profile</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=3" alt="Icon">
                <span class="text-gray-800 dark:text-white">Settings</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=4" alt="Icon">
                <span class="text-gray-800 dark:text-white">Messages</span>
            </a>
        </li>
        <li>
            <a href="#" class="flex items-center p-3 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors duration-300">
                <img class="w-5 h-5 mr-2" src="https://picsum.photos/20/20?random=5" alt="Icon">
                <span class="text-gray-800 dark:text-white">Logout</span>
            </a>
        </li>
    </ul>
</div>