Notifications Component

<div class="relative">
  <!-- Notifications Button -->
  <button class="relative flex items-center justify-center w-10 h-10 bg-blue-500 text-white rounded-full shadow-lg focus:outline-none dark:bg-blue-700">
    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 01-6 0v-1m6 0H9"></path>
    </svg>
    <span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 transform translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full dark:bg-red-800">3</span>
  </button>

  <!-- Notifications Dropdown (Hidden by Default) -->
  <div class="absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-xl overflow-hidden z-10 dark:bg-gray-800 dark:text-gray-200">
    <div class="py-2">

      <!-- Notification Item 1 -->
      <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-700">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <p class="text-sm">
          <span class="font-bold">John Doe</span> added a new report.
          <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">2 hours ago</span>
        </p>
      </a>

      <!-- Notification Item 2 -->
      <a href="#" class="flex items-center px-4 py-3 border-b hover:bg-gray-100 dark:border-gray-700 dark:hover:bg-gray-700">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
        <p class="text-sm">
          <span class="font-bold">Jane Smith</span> commented on your task.
          <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">5 hours ago</span>
        </p>
      </a>

      <!-- Notification Item 3 -->
      <a href="#" class="flex items-center px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-700">
        <img class="h-8 w-8 rounded-full object-cover mr-3" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar">
        <p class="text-sm">
          <span class="font-bold">David Green</span> completed a project.
          <span class="ml-2 text-xs text-gray-500 dark:text-gray-400">Yesterday</span>
        </p>
      </a>

    </div>

    <!-- View All Button -->
    <a href="#" class="block bg-gray-50 text-center font-bold py-3 text-blue-500 hover:underline dark:bg-gray-700 dark:text-blue-400">
      View All Notifications
    </a>
  </div>
</div>