Notifications Component

<div class="fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center p-4" dark:bg-gray-900 dark:bg-opacity-80>
  <div class="bg-yellow-400 border-4 border-black p-8 shadow-brutalism w-full max-w-md transform -rotate-3 hover:rotate-0 transition-transform duration-300 dark:bg-purple-700 dark:border-yellow-400">
    <div class="flex justify-between items-center mb-6">
      <h2 class="text-3xl font-extrabold text-black uppercase tracking-wider dark:text-yellow-400">Notifications</h2>
      <button class="text-black hover:text-red-700 text-4xl font-bold dark:text-yellow-400 dark:hover:text-red-400">&times;</button>
    </div>
    <div class="space-y-6">
      <div class="bg-blue-500 border-2 border-black p-4 flex items-start space-x-4 transform rotate-1 hover:rotate-0 transition-transform duration-300 dark:bg-teal-500 dark:border-yellow-400">
        <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-black dark:border-yellow-400">
        <div>
          <p class="text-black font-semibold text-lg dark:text-yellow-400">New message from <span class="underline">Alex</span></p>
          <p class="text-gray-800 text-sm dark:text-yellow-200">"Hey, are you free for a quick call today?"</p>
          <span class="text-xs text-gray-700 dark:text-yellow-100">2 min ago</span>
        </div>
      </div>

      <div class="bg-red-600 border-2 border-black p-4 flex items-start space-x-4 transform -rotate-2 hover:rotate-0 transition-transform duration-300 dark:bg-orange-500 dark:border-yellow-400">
        <img src="https://randomuser.me/api/portraits/thumb/women/80.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-black dark:border-yellow-400">
        <div>
          <p class="text-black font-semibold text-lg dark:text-yellow-400">Task <span class="underline">"Prepare Q3 Report"</span> is overdue</p>
          <p class="text-gray-800 text-sm dark:text-yellow-200">Please complete it by end of day.</p>
          <span class="text-xs text-gray-700 dark:text-yellow-100">1 hour ago</span>
        </div>
      </div>

      <div class="bg-green-500 border-2 border-black p-4 flex items-start space-x-4 transform rotate-1 hover:rotate-0 transition-transform duration-300 dark:bg-lime-500 dark:border-yellow-400">
        <img src="https://picsum.photos/seed/dashboard/50/50" alt="Dashboard Icon" class="w-12 h-12 rounded-full border-2 border-black dark:border-yellow-400 object-cover">
        <div>
          <p class="text-black font-semibold text-lg dark:text-yellow-400">System Update Available</p>
          <p class="text-gray-800 text-sm dark:text-yellow-200">New features and bug fixes. Click to learn more.</p>
          <span class="text-xs text-gray-700 dark:text-yellow-100">5 hours ago</span>
        </div>
      </div>
    </div>

    <div class="mt-8 text-center">
      <button class="bg-black text-yellow-400 border-2 border-yellow-400 px-6 py-3 font-bold uppercase text-lg tracking-wider hover:bg-yellow-400 hover:text-black transition-colors duration-300 dark:bg-yellow-400 dark:text-black dark:border-purple-700 dark:hover:bg-purple-700 dark:hover:text-yellow-400">
        View All
      </button>
    </div>
  </div>
</div>

<style>
  .shadow-brutalism {
    box-shadow: 8px 8px 0px black;
  }

  /* Dark mode styles come from Tailwind dark: prefix */
</style>