Brutalist Monochromatic Activity Feed

<div class="font-mono min-h-screen bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 md:p-8 lg:p-10">
  <div class="max-w-4xl mx-auto border-4 border-black dark:border-white bg-gray-200 dark:bg-gray-800 shadow-md transform -rotate-1 skew-x-1 p-0.5">
    <div class="bg-gray-50 dark:bg-gray-950 p-6 sm:p-8 lg:p-10 border-4 border-black dark:border-white transform rotate-1 -skew-x-1">
      <h2 class="text-4xl sm:text-5xl md:text-6xl font-extrabold mb-8 text-black dark:text-white uppercase leading-none skew-y-2 transform -translate-x-2">
        Activity <br class="sm:hidden"/>Feed
      </h2>

      <div class="space-y-6 sm:space-y-8 lg:space-y-10">
        <!-- Activity Item 1: New Project -->
        <div class="relative p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-white shadow-xl transform hover:scale-105 transition-transform duration-200 ease-out">
          <span class="absolute -top-3 -left-3 bg-red-600 text-white text-xs px-2 py-1 uppercase font-bold transform rotate-6">NEW!</span>
          <div class="flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
            <img class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-black dark:border-white shadow-lg transform -rotate-3" src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar">
            <div>
              <p class="text-lg sm:text-xl font-bold text-black dark:text-white uppercase mb-1">
                <span class="text-gray-700 dark:text-gray-300">John Doe</span> created <span class="text-black dark:text-white underline decoration-wavy decoration-2">'Project Alpha'</span>
              </p>
              <p class="text-sm text-gray-600 dark:text-gray-400 font-bold block sm:inline-block border-b-2 border-black dark:border-white pb-1 sm:pb-0">2 hours ago</p>
            </div>
          </div>
        </div>

        <!-- Activity Item 2: Task Update -->
        <div class="relative p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-white shadow-xl transform hover:scale-105 transition-transform duration-200 ease-out">
          <div class="flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
            <img class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-black dark:border-white shadow-lg transform rotate-2" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
            <div>
              <p class="text-lg sm:text-xl font-bold text-black dark:text-white uppercase mb-1">
                <span class="text-gray-700 dark:text-gray-300">Jane Smith</span> updated <span class="text-black dark:text-white underline decoration-wavy decoration-2">'Task #123'</span>
              </p>
              <p class="text-sm text-gray-600 dark:text-gray-400 font-bold block sm:inline-block border-b-2 border-black dark:border-white pb-1 sm:pb-0">4 hours ago</p>
            </div>
          </div>
        </div>

        <!-- Activity Item 3: File Upload -->
        <div class="relative p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-white shadow-xl transform hover:scale-105 transition-transform duration-200 ease-out">
          <div class="flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
            <img class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-black dark:border-white shadow-lg transform -rotate-5" src="https://randomuser.me/api/portraits/men/44.jpg" alt="User Avatar">
            <div>
              <p class="text-lg sm:text-xl font-bold text-black dark:text-white uppercase mb-1">
                <span class="text-gray-700 dark:text-gray-300">Robert Brown</span> uploaded <span class="text-black dark:text-white underline decoration-wavy decoration-2">'report_Q3.pdf'</span>
              </p>
              <p class="text-sm text-gray-600 dark:text-gray-400 font-bold block sm:inline-block border-b-2 border-black dark:border-white pb-1 sm:pb-0">Yesterday</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="absolute bottom-2 right-2 text-xs text-black dark:text-white font-bold transform -rotate-3">LIVE FEED</div>
  </div>
</div>