社交媒体仪表板

<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-900">
  <div class="flex flex-col md:flex-row gap-4">
    <!-- Sidebar (User Profile) -->
    <div class="w-full md:w-1/4 bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
      <div class="flex flex-col items-center">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-16 h-16 rounded-full mb-4 border-2 border-blue-500">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">John Doe</h2>
        <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
        <div class="mt-4 flex gap-4">
          <span class="text-blue-500 cursor-pointer hover:underline">Followers: 1.2k</span>
          <span class="text-blue-500 cursor-pointer hover:underline">Following: 350</span>
        </div>
      </div>
    </div>

    <!-- Main Content (Feed) -->
    <div class="w-full md:w-3/4">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 mb-4 transform transition duration-300 hover:scale-105">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
          <div>
            <p class="font-semibold text-gray-800 dark:text-white">Jane Smith</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">Enjoying a beautiful day out in the nature! #nature #happy</p>
        <img src="https://picsum.photos/600/400" alt="Post Image" class="rounded-lg mb-4">
        <div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
          <span class="cursor-pointer hover:text-blue-500">Likes: 25</span>
          <span class="cursor-pointer hover:text-blue-500">Comments: 5</span>
          <span class="cursor-pointer hover:text-blue-500">Share</span>
        </div>
      </div>

      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 transform transition duration-300 hover:scale-105">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/60.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
          <div>
            <p class="font-semibold text-gray-800 dark:text-white">Peter Jones</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">5 hours ago</p>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">New blog post is up! Check it out. #blogging #technology</p>
        <div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
          <span class="cursor-pointer hover:text-blue-500">Likes: 15</span>
          <span class="cursor-pointer hover:text-blue-500">Comments: 3</span>
          <span class="cursor-pointer hover:text-blue-500">Share</span>
        </div>
      </div>
    </div>
  </div>
</div>