Activity Feed 구성 요소

<div class="font-sans antialiased text-gray-900 bg-gray-100 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 md:p-8 min-h-screen">

  <div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
    
    <div class="bg-black dark:bg-gray-950 p-4 sm:p-5 flex items-center justify-between border-b-4 border-red-500">
      <h2 class="text-xl sm:text-2xl font-bold uppercase tracking-wider text-white">Activity Feed</h2>
      <button class="p-2 rounded-full text-white hover:bg-white hover:text-black focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75 transition duration-300 ease-in-out">
        <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="M4 6h16M4 12h16M4 18h16"></path></svg>
      </button>
    </div>

    <div class="p-4 sm:p-6 space-y-6 sm:space-y-8">

      <!-- Activity Item 1 -->
      <div class="flex items-start space-x-4">
        <div class="flex-shrink-0 animate-pulse">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-red-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow min-w-0">
          <div class="text-sm text-gray-500 dark:text-gray-400 mb-1 flex justify-between items-center">
            <span class="font-medium text-gray-700 dark:text-gray-300">John Doe</span> changed the status of <span class="font-medium text-gray-700 dark:text-gray-300">Task #1234</span>
            <time datetime="2023-10-27T14:30:00Z" class="ml-2 text-xs">2 hours ago</time>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 p-3 rounded-md shadow-inner text-sm">
            <p class="text-gray-700 dark:text-gray-300 font-bold mb-1">Status Update:</p>
            <p class="text-gray-600 dark:text-gray-400">From <span class="px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">In Progress</span> to <span class="px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Completed</span></p>
          </div>
        </div>
      </div>
      
      <!-- Activity Item 2 -->
      <div class="flex items-start space-x-4">
        <div class="flex-shrink-0">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-red-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow min-w-0">
          <div class="text-sm text-gray-500 dark:text-gray-400 mb-1 flex justify-between items-center">
            <span class="font-medium text-gray-700 dark:text-gray-300">Jane Smith</span> added 3 new files to <span class="font-medium text-gray-700 dark:text-gray-300">Project Alpha</span>
            <time datetime="2023-10-27T13:00:00Z" class="ml-2 text-xs">3 hours ago</time>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 p-3 rounded-md shadow-inner">
            <ul class="text-sm text-gray-600 dark:text-gray-400 space-y-1">
              <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-gray-400" 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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>design_mockup_v2.png</li>
              <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-gray-400" 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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>requirements.pdf</li>
              <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-gray-400" 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="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>project_plan.xlsx</li>
            </ul>
          </div>
        </div>
      </div>

      <!-- Activity Item 3 -->
      <div class="flex items-start space-x-4">
        <div class="flex-shrink-0">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-red-500" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow min-w-0">
          <div class="text-sm text-gray-500 dark:text-gray-400 mb-1 flex justify-between items-center">
            <span class="font-medium text-gray-700 dark:text-gray-300">Robert Brown</span> commented on <span class="font-medium text-gray-700 dark:text-gray-300">Bug Report #567</span>
            <time datetime="2023-10-27T10:15:00Z" class="ml-2 text-xs">6 hours ago</time>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 p-3 rounded-md shadow-inner text-sm">
            <p class="text-gray-700 dark:text-gray-300">"I've replicated the bug on Firefox 118. It seems to be related to the new authentication flow. Investigating a fix now."</p>
          </div>
        </div>
      </div>

      <!-- Activity Item 4 -->
      <div class="flex items-start space-x-4">
        <div class="flex-shrink-0">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-red-500" src="https://randomuser.me/api/portraits/women/62.jpg" alt="User Avatar">
        </div>
        <div class="flex-grow min-w-0">
          <div class="text-sm text-gray-500 dark:text-gray-400 mb-1 flex justify-between items-center">
            <span class="font-medium text-gray-700 dark:text-gray-300">Emily White</span> invited <span class="font-medium text-gray-700 dark:text-gray-300">David Green</span> to the team
            <time datetime="2023-10-27T09:00:00Z" class="ml-2 text-xs">8 hours ago</time>
          </div>
          <div class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 p-3 rounded-md shadow-inner">
            <div class="flex items-center space-x-3">
              <img class="w-8 h-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/70.jpg" alt="Invited User Avatar">
              <div>
                <p class="text-gray-700 dark:text-gray-300 font-medium">David Green</p>
                <p class="text-gray-600 dark:text-gray-400 text-xs">[email protected]</p>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="bg-gray-50 dark:bg-gray-700 p-4 sm:p-5 border-t border-gray-200 dark:border-gray-600 flex justify-center">
      <button class="px-6 py-2 bg-red-500 text-white font-semibold rounded-md shadow-md hover:bg-black dark:hover:bg-gray-950 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-300 ease-in-out uppercase tracking-wide text-sm">
        Load More
      </button>
    </div>

  </div>
</div>