Activity Feed Component

<div class="min-h-screen bg-gray-950 text-gray-50 dark:bg-gray-950 dark:text-gray-50 p-4 sm:p-6 lg:p-8 font-sans">
  <div class="max-w-4xl mx-auto bg-gray-900 rounded-lg shadow-xl overflow-hidden dark:bg-gray-900">
    <div class="p-6 border-b border-gray-800 dark:border-gray-800">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-blue-400 mb-2">Activity Feed</h2>
      <p class="text-gray-400 text-sm sm:text-base">Keep up with your team's latest achievements and updates.</p>
    </div>

    <div class="space-y-6 p-6">

      <!-- Activity Item: Workout Completion -->
      <div class="flex items-start space-x-4 bg-gray-800 p-4 rounded-lg shadow-md hover:bg-gray-700 transition duration-300 ease-in-out">
        <img class="w-10 h-10 rounded-full object-cover ring-2 ring-blue-500" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-lg font-semibold mb-1">
            <a href="#" class="text-blue-300 hover:text-blue-400">John Doe</a> <span class="text-gray-400">completed a</span> <span class="text-blue-400 font-medium">HIIT Workout</span>.
          </p>
          <p class="text-gray-400 text-sm mb-2">Duration: 45 min · Calories Burned: 550 kcal</p>
          <div class="flex flex-wrap gap-2 mb-3">
            <span class="bg-blue-600/20 text-blue-300 text-xs px-2.5 py-1 rounded-full font-medium">#FitnessGoal</span>
            <span class="bg-blue-600/20 text-blue-300 text-xs px-2.5 py-1 rounded-full font-medium">#HIIT</span>
          </div>
          <div class="flex items-center text-gray-400 text-sm">
            <span class="flex items-center mr-4"><svg class="w-4 h-4 mr-1" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 12 Likes</span>
            <span class="flex items-center"><svg class="w-4 h-4 mr-1" 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="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg> 5 Comments</span>
            <span class="flex-grow text-right text-xs text-gray-500">2 hours ago</span>
          </div>
        </div>
      </div>

      <!-- Activity Item: New Personal Best -->
      <div class="flex items-start space-x-4 bg-gray-800 p-4 rounded-lg shadow-md hover:bg-gray-700 transition duration-300 ease-in-out">
        <img class="w-10 h-10 rounded-full object-cover ring-2 ring-blue-500" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-lg font-semibold mb-1">
            <a href="#" class="text-blue-300 hover:text-blue-400">Jane Smith</a> <span class="text-gray-400">set a new Personal Best in</span> <span class="text-blue-400 font-medium">Cycling (10k sprint)</span>.
          </p>
          <p class="text-gray-400 text-sm mb-2">Time: 18:30 min · Previous PB: 19:15 min</p>
          <img src="https://picsum.photos/600/300?random=1" alt="Cycling Route" class="rounded-md w-full h-32 object-cover mb-3">
          <div class="flex items-center text-gray-400 text-sm">
            <span class="flex items-center mr-4"><svg class="w-4 h-4 mr-1" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 28 Likes</span>
            <span class="flex items-center"><svg class="w-4 h-4 mr-1" 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="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg> 9 Comments</span>
            <span class="flex-grow text-right text-xs text-gray-500">4 hours ago</span>
          </div>
        </div>
      </div>

      <!-- Activity Item: Team Challenge Update -->
      <div class="flex items-start space-x-4 bg-gray-800 p-4 rounded-lg shadow-md hover:bg-gray-700 transition duration-300 ease-in-out">
        <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center text-xl font-bold text-white">⚽</div>
        <div class="flex-1">
          <p class="text-lg font-semibold mb-1">
            The <span class="text-blue-300 hover:text-blue-400">Team Alpha</span> <span class="text-gray-400">advanced to the next round in the</span> <span class="text-blue-400 font-medium">Winter League Cup</span>.
          </p>
          <p class="text-gray-400 text-sm mb-2">Next Match: Dec 15, 7 PM vs Team Omega</p>
          <div class="flex items-center space-x-2 text-gray-400 text-sm mb-3">
            <img class="w-6 h-6 rounded-full object-cover ring-1 ring-gray-600" src="https://randomuser.me/api/portraits/men/12.jpg" alt="Team Member">
            <img class="w-6 h-6 rounded-full object-cover ring-1 ring-gray-600" src="https://randomuser.me/api/portraits/women/23.jpg" alt="Team Member">
            <img class="w-6 h-6 rounded-full object-cover ring-1 ring-gray-600" src="https://randomuser.me/api/portraits/men/34.jpg" alt="Team Member">
            <span class="text-xs text-gray-500">+5 members involved</span>
          </div>
          <div class="flex items-center text-gray-400 text-sm">
            <span class="flex items-center mr-4"><svg class="w-4 h-4 mr-1" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 40 Likes</span>
            <span class="flex items-center"><svg class="w-4 h-4 mr-1" 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="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg> 15 Comments</span>
            <span class="flex-grow text-right text-xs text-gray-500">8 hours ago</span>
          </div>
        </div>
      </div>

      <!-- Activity Item: New Achievement Unlocked -->
      <div class="flex items-start space-x-4 bg-gray-800 p-4 rounded-lg shadow-md hover:bg-gray-700 transition duration-300 ease-in-out">
        <img class="w-10 h-10 rounded-full object-cover ring-2 ring-blue-500" src="https://randomuser.me/api/portraits/men/88.jpg" alt="User Avatar">
        <div class="flex-1">
          <p class="text-lg font-semibold mb-1">
            <a href="#" class="text-blue-300 hover:text-blue-400">Mike Ross</a> <span class="text-gray-400">unlocked the achievement:</span> <span class="text-blue-400 font-medium">'Marathon Finisher'</span>.
          </p>
          <p class="text-gray-400 text-sm mb-2">Congratulations on finishing your first full marathon!</p>
          <div class="relative w-full h-32 rounded-md overflow-hidden mb-3">
            <img src="https://picsum.photos/600/300?random=2" alt="Marathon run" class="w-full h-full object-cover">
            <div class="absolute inset-0 bg-gradient-to-t from-gray-900 to-transparent flex items-end p-3">
              <span class="text-2xl font-extrabold text-blue-300 drop-shadow-lg">🏅 Achievement Unlocked!</span>
            </div>
          </div>
          <div class="flex items-center text-gray-400 text-sm">
            <span class="flex items-center mr-4"><svg class="w-4 h-4 mr-1" 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 22.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 55 Likes</span>
            <span class="flex items-center"><svg class="w-4 h-4 mr-1" 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="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg> 20 Comments</span>
            <span class="flex-grow text-right text-xs text-gray-500">1 day ago</span>
          </div>
        </div>
      </div>

    </div>

    <div class="p-6 text-center border-t border-gray-800 dark:border-gray-800">
      <button class="px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75">
        Load More Activities
      </button>
    </div>
  </div>
</div>