Activity Feed 구성 요소

<section class="bg-gray-100 dark:bg-gray-900 py-8 lg:py-16 antialiased">
  <div class="max-w-2xl mx-auto px-4">
    <h2 class="text-2xl font-semibold text-gray-900 dark:text-white mb-6">Activity Feed</h2>

    <article class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-lg mb-6 relative">
      <div class="absolute inset-0 border-2 border-indigo-300 dark:border-indigo-700 rounded-lg transform origin-bottom rotate-3 scale-105 -z-10"></div>
      <div class="flex items-center mb-4">
        <img class="w-8 h-8 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-400">John Doe posted a new article</p>
      </div>
      <p class="text-gray-800 dark:text-gray-200 leading-relaxed mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline text-sm">Read more</a>
    </article>

    <article class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-lg mb-6 relative">
        <div class="absolute inset-0 border-2 border-pink-300 dark:border-pink-700 rounded-lg transform origin-bottom rotate-3 scale-105 -z-10"></div>
      <div class="flex items-center mb-4">
        <img class="w-8 h-8 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-400">Jane Smith commented on a post</p>
      </div>
      <p class="text-gray-800 dark:text-gray-200 leading-relaxed mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline text-sm">View comment</a>
    </article>

    <article class="p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md dark:shadow-lg relative">
        <div class="absolute inset-0 border-2 border-teal-300 dark:border-teal-700 rounded-lg transform origin-bottom rotate-3 scale-105 -z-10"></div>
      <div class="flex items-center mb-4">
        <img class="w-8 h-8 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
        <p class="text-sm text-gray-600 dark:text-gray-400">Peter Jones liked an article</p>
      </div>
      <p class="text-gray-800 dark:text-gray-200 leading-relaxed mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
      <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline text-sm">View article</a>
    </article>

  </div>
</section>