Skeuomorphism サイドバー

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