Social Components Component

<div class="p-4 bg-gray-200 dark:bg-gray-800 shadow-xl rounded-lg">
  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Social Feed</h2>
  <div class="space-y-4">
    <!-- Post 1 -->
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-500 mr-3">
        <div>
          <p class="font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">2 hours ago</p>
        </div>
      </div>
      <p class="text-gray-800 dark:text-gray-200 mb-3">Exploring the new dashboard features! Really intuitive and clean design. #dashboard #UIUX</p>
      <img src="https://picsum.photos/400/200?random=1" alt="Post Image" class="w-full rounded-md shadow-inner mb-2">
      <div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>❤️ 23 Likes</span>
        <span>💬 5 Comments</span>
      </div>
    </div>

    <!-- Post 2 -->
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-500 mr-3">
        <div>
          <p class="font-semibold text-gray-900 dark:text-gray-100">Jane Smith</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Yesterday</p>
        </div>
      </div>
      <p class="text-gray-800 dark:text-gray-200 mb-3">Just launched my new project! Check it out in the updated dashboard. Let me know your thoughts! #projectlaunch #dashboard</p>
      <div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>❤️ 45 Likes</span>
        <span>💬 12 Comments</span>
      </div>
    </div>

    <!-- Post 3 -->
    <div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-500 mr-3">
        <div>
          <p class="font-semibold text-gray-900 dark:text-gray-100">Peter Jones</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">3 days ago</p>
        </div>
      </div>
      <p class="text-gray-800 dark:text-gray-200 mb-3">The new analytics module in the dashboard is a game-changer! So much data presented clearly. Highly recommend! #analytics #datadriven</p>
      <img src="https://picsum.photos/400/200?random=2" alt="Post Image" class="w-full rounded-md shadow-inner mb-2">
      <div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
        <span>❤️ 60 Likes</span>
        <span>💬 8 Comments</span>
      </div>
    </div>
  </div>
</div>