RetroPastelSocialSidebar

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