Composant de flux d’activité

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-mono">
  <div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 border-4 border-black dark:border-gray-700 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#4a5568] p-6 space-y-6">
    <h1 class="text-3xl md:text-4xl font-extrabold text-black dark:text-gray-100 uppercase border-b-4 border-black dark:border-gray-700 pb-2 mb-6">
      Activity Feed
    </h1>

    <!-- Activity Item 1 -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-yellow-100 dark:bg-yellow-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">John Doe</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">created a new <span class="text-red-700 dark:text-red-400 font-semibold">project proposal</span>.</p>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">2 hours ago</p>
      </div>
    </div>

    <!-- Activity Item 2 -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-pink-100 dark:bg-pink-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">Jane Smith</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">updated <span class="text-blue-700 dark:text-blue-400 font-semibold">marketing strategy document</span>.</p>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">5 hours ago</p>
      </div>
    </div>

    <!-- Activity Item 3 -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-green-100 dark:bg-green-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">Michael Brown</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">completed <span class="text-purple-700 dark:text-purple-400 font-semibold">Q3 financial report</span>.</p>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">1 day ago</p>
      </div>
    </div>

    <!-- Activity Item 4 - With an image -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-orange-100 dark:bg-orange-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/women/60.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">Sarah Davis</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">uploaded new images to <span class="text-teal-700 dark:text-teal-400 font-semibold">product showcase</span>:</p>
        <div class="mt-2 grid grid-cols-2 gap-2">
          <img class="w-full h-24 object-cover border-2 border-black dark:border-gray-700" src="https://picsum.photos/id/237/200/150" alt="Product Image 1">
          <img class="w-full h-24 object-cover border-2 border-black dark:border-gray-700" src="https://picsum.photos/id/238/200/150" alt="Product Image 2">
        </div>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">3 days ago</p>
      </div>
    </div>

    <!-- Activity Item 5 - Complex with multiple actions -->
    <div class="flex items-start space-x-4 border-2 border-black dark:border-gray-700 p-4 bg-purple-100 dark:bg-purple-900">
      <img class="w-12 h-12 rounded-full border-2 border-black dark:border-gray-700" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
      <div>
        <p class="text-black dark:text-gray-200 text-lg font-bold">David Wilson</p>
        <p class="text-gray-700 dark:text-gray-400 text-sm">reviewed <span class="text-indigo-700 dark:text-indigo-400 font-semibold">client feedback report</span> and left 3 comments:</p>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-400 text-sm mt-2 space-y-1">
          <li>"Consider revising section 3.1 for clarity."</li>
          <li>"Great work on the data analysis!"</li>
          <li>"Meeting scheduled to discuss next steps."</li>
        </ul>
        <p class="text-gray-500 dark:text-gray-500 text-xs mt-1">1 week ago</p>
      </div>
    </div>

  </div>
</div>