Retro_Healthcare_Activity_Feed

<div class="font-mono p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-300 to-pink-300 dark:from-gray-900 dark:to-gray-800 min-h-screen text-gray-800 dark:text-gray-200">

  <!-- Header with Retro Vibe -->
  <div class="mb-8 text-center">
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white dark:text-pink-400 drop-shadow-lg leading-tight">
      <span class="bg-gradient-to-r from-red-500 to-yellow-400 px-3 py-1 rounded-lg shadow-lg inline-block transform -rotate-2 animate-pulse-slow">RETRO</span> HEALTH ACTIVITY
    </h1>
    <p class="mt-2 text-xl sm:text-2xl font-semibold text-purple-700 dark:text-purple-300 antialiased">Your Healthcare Pulse</p>
  </div>

  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-6 sm:p-8 border-4 border-yellow-400 dark:border-pink-500 transform skew-y-1 rotate-1 scale-95 transition-all duration-300 hover:skew-y-0 hover:rotate-0 hover:scale-100 ease-in-out">
    <div class="flex items-center justify-between mb-6 border-b-2 border-dashed border-purple-400 dark:border-pink-600 pb-4">
      <h2 class="text-3xl font-bold uppercase text-blue-600 dark:text-blue-400 tracking-wide">
        Activity Log <span class="text-yellow-500 dark:text-yellow-300 animate-bounce ml-2 text-4xl">★</span>
      </h2>
      <button class="bg-yellow-500 hover:bg-yellow-600 dark:bg-pink-600 dark:hover:bg-pink-700 text-white dark:text-gray-100 font-bold py-2 px-4 rounded-full shadow-lg transform -skew-x-6 hover:skew-x-0 transition-transform duration-200">
        View All
      </button>
    </div>

    <ul class="space-y-6">

      <!-- Activity Item 1 -->
      <li class="flex items-start bg-blue-100 dark:bg-gray-700 p-4 rounded-lg shadow-inner border-2 border-blue-300 dark:border-gray-600 transform hover:scale-[1.01] transition-transform duration-150 relative">
        <div class="absolute -left-2 -top-2 w-4 h-4 bg-yellow-400 dark:bg-pink-500 border-2 border-white dark:border-gray-800 rounded-full animate-ping-slow"></div>
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4 border-4 border-blue-400 dark:border-cyan-400 shadow-md">
        <div class="flex-1">
          <p class="text-sm text-gray-500 dark:text-gray-400 mb-1"><time datetime="2023-10-26T14:30">Oct 26, 2023, 2:30 PM</time></p>
          <p class="text-lg font-bold text-blue-700 dark:text-blue-300 mb-1">Dr. Anya Sharma</p>
          <p class="text-purple-800 dark:text-purple-200"><span class="font-semibold">New Prescription Added:</span> <span class="font-mono bg-blue-200 dark:bg-gray-600 text-blue-800 dark:text-white px-2 py-1 rounded-md text-sm">Insulin - 10 units daily</span> for diabetes management.</p>
        </div>
        <div class="flex-none text-2xl text-yellow-600 dark:text-yellow-400 ml-4 hidden sm:block">💊</div>
      </li>

      <!-- Activity Item 2 -->
      <li class="flex items-start bg-green-100 dark:bg-gray-700 p-4 rounded-lg shadow-inner border-2 border-green-300 dark:border-gray-600 transform hover:scale-[1.01] transition-transform duration-150 relative">
        <div class="absolute -left-2 -top-2 w-4 h-4 bg-yellow-400 dark:bg-pink-500 border-2 border-white dark:border-gray-800 rounded-full animate-ping-slow"></div>
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4 border-4 border-green-400 dark:border-emerald-400 shadow-md">
        <div class="flex-1">
          <p class="text-sm text-gray-500 dark:text-gray-400 mb-1"><time datetime="2023-10-26T10:15">Oct 26, 2023, 10:15 AM</time></p>
          <p class="text-lg font-bold text-green-700 dark:text-green-300 mb-1">System Update</p>
          <p class="text-purple-800 dark:text-purple-200"><span class="font-semibold">New Feature:</span> Your latest blood pressure readings have been successfully synchronized from your smart device. <span class="text-green-600 dark:text-green-400 blinking-text">LIVE!</span></p>
        </div>
        <div class="flex-none text-2xl text-lime-600 dark:text-lime-400 ml-4 hidden sm:block">📈</div>
      </li>

      <!-- Activity Item 3 -->
      <li class="flex items-start bg-yellow-100 dark:bg-gray-700 p-4 rounded-lg shadow-inner border-2 border-yellow-300 dark:border-gray-600 transform hover:scale-[1.01] transition-transform duration-150 relative">
        <div class="absolute -left-2 -top-2 w-4 h-4 bg-purple-400 dark:bg-pink-500 border-2 border-white dark:border-gray-800 rounded-full animate-ping-slow"></div>
        <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-4 border-4 border-yellow-400 dark:border-amber-400 shadow-md">
        <div class="flex-1">
          <p class="text-sm text-gray-500 dark:text-gray-400 mb-1"><time datetime="2023-10-25T16:00">Oct 25, 2023, 4:00 PM</time></p>
          <p class="text-lg font-bold text-yellow-700 dark:text-yellow-300 mb-1">Clinic Notification</p>
          <p class="text-purple-800 dark:text-purple-200"><span class="font-semibold">Appointment Reminder:</span> Your upcoming physiotherapy session is scheduled for <span class="font-mono bg-yellow-200 dark:bg-gray-600 text-yellow-800 dark:text-white px-2 py-1 rounded-md text-sm">tomorrow, Oct 27, 9:00 AM</span>.</p>
        </div>
        <div class="flex-none text-2xl text-orange-600 dark:text-orange-400 ml-4 hidden sm:block">📅</div>
      </li>

      <!-- Activity Item 4 -->
      <li class="flex items-start bg-red-100 dark:bg-gray-700 p-4 rounded-lg shadow-inner border-2 border-red-300 dark:border-gray-600 transform hover:scale-[1.01] transition-transform duration-150 relative">
        <div class="absolute -left-2 -top-2 w-4 h-4 bg-purple-400 dark:bg-pink-500 border-2 border-white dark:border-gray-800 rounded-full animate-ping-slow"></div>
        <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="System Bot" class="w-12 h-12 rounded-full mr-4 border-4 border-red-400 dark:border-rose-400 shadow-md">
        <div class="flex-1">
          <p class="text-sm text-gray-500 dark:text-gray-400 mb-1"><time datetime="2023-10-25T09:00">Oct 25, 2023, 9:00 AM</time></p>
          <p class="text-lg font-bold text-red-700 dark:text-red-300 mb-1">Emergency Contact Alert</p>
          <p class="text-purple-800 dark:text-purple-200"><span class="font-semibold">Emergency Alert Test:</span> Your emergency contacts have been notified of a system test. No action required. <span class="text-red-600 dark:text-red-400 flashing-text">TEST!</span></p>
        </div>
        <div class="flex-none text-2xl text-red-600 dark:text-red-400 ml-4 hidden sm:block">🚨</div>
      </li>

    </ul>

    <div class="mt-8 text-center">
      <button class="bg-purple-600 hover:bg-purple-700 dark:bg-indigo-600 dark:hover:bg-indigo-700 text-white dark:text-gray-100 font-extrabold py-3 px-8 rounded-lg shadow-lg text-lg transform hover:scale-105 transition-transform duration-200 border-4 border-pink-400 dark:border-yellow-400 animate-pulse">
        LOAD MORE DATA
      </button>
    </div>
  </div>

  <!-- Tailwind JIT custom animations (typically in tailwind.config.js - but included here for single file component) -->
  <style>
    @keyframes pulse-slow {
      0%, 100% { opacity: 1; transform: scale(1) rotate(-2deg); }
      50% { opacity: 0.8; transform: scale(1.02) rotate(-2deg); }
    }
    .animate-pulse-slow {
      animation: pulse-slow 4s infinite ease-in-out;
    }

    @keyframes blinking-text {
      0%, 100% { opacity: 1; }
      50% { opacity: 0; }
    }
    .blinking-text {
      animation: blinking-text 1.5s infinite step-end;
    }

    @keyframes flashing-text {
      0%, 100% { color: #dc2626; /* red-600 */ }
      50% { color: #facc15; /* yellow-400 */ }
    }
    .flashing-text {
      animation: flashing-text 0.8s infinite step-end;
    }

    @keyframes ping-slow {
      0% { transform: scale(0.8); opacity: 0.5; }
      100% { transform: scale(1.5); opacity: 0; }
    }
    .animate-ping-slow {
      animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
    }

    /* Basic dark mode toggle for demonstration, not part of the component itself but useful for testing */
    .dark-mode-toggle {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        background-color: #6d28d9; /* Deep Purple */
        color: white;
        padding: 0.75rem 1.25rem;
        border-radius: 9999px;
        cursor: pointer;
        font-family: sans-serif;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        z-index: 1000;
    }
    .dark .dark-mode-toggle {
        background-color: #db2777; /* Deep Pink */
    }
  </style>

  <!-- Simple Dark Mode Toggle (for demonstration) -->
  <button class="dark-mode-toggle" onclick="document.documentElement.classList.toggle('dark')">
    Toggle Dark Mode
  </button>

</div>