Activity Feed 구성 요소

<div class="font-sans antialiased bg-stone-100 dark:bg-stone-900 text-stone-800 dark:text-stone-200 p-4 sm:p-6 lg:p-8">
  <div class="max-w-4xl mx-auto bg-white dark:bg-stone-850 shadow-xl rounded-lg overflow-hidden border border-stone-200 dark:border-stone-700">
    <div class="p-6 sm:p-8 relative overflow-hidden">
      <!-- Organic top border -->
      <div class="absolute inset-x-0 top-0 h-4 bg-gradient-to-r from-green-700 via-amber-700 to-green-700 origin-bottom scale-y-75 rounded-t-lg -skew-x-12 opacity-75 dark:opacity-50 blur-sm"></div>

      <h2 class="text-3xl sm:text-4xl font-extrabold text-stone-900 dark:text-stone-100 mb-2 sm:mb-4 relative z-10">Event Activity Feed</h2>
      <p class="text-lg text-stone-600 dark:text-stone-300 mb-6 sm:mb-8 border-b border-stone-300 dark:border-stone-700 pb-4">Stay up-to-date with the latest happenings at Nature's Summit 2024.</p>

      <div class="space-y-8">

        <!-- Activity Item 1 -->
        <div class="flex items-start">
          <div class="w-12 h-12 sm:w-16 sm:h-16 flex-shrink-0 relative group">
            <img class="w-full h-full rounded-full object-cover border-4 border-amber-500 dark:border-amber-600 outline outline-2 outline-offset-2 outline-green-300 dark:outline-green-700 transition-transform duration-300 ease-in-out group-hover:scale-110" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
            <span class="absolute bottom-0 right-0 block w-4 h-4 sm:w-5 sm:h-5 bg-green-500 rounded-full ring-2 ring-white dark:ring-stone-850"></span>
          </div>
          <div class="ml-4 flex-grow relative px-4 py-3 sm:px-6 sm:py-4 bg-stone-50 dark:bg-stone-800 rounded-2xl rounded-tl-none shadow-md border border-stone-200 dark:border-stone-700 before:absolute before:content-[''] before:left-0 before:top-0 before:w-0 before:h-0 before:border-8 before:border-transparent before:border-r-stone-50 dark:before:border-r-stone-800 before:-ml-4 transition duration-300 ease-in-out hover:shadow-lg">
            <p class="text-stone-900 dark:text-stone-100 font-semibold mb-1">Dr. Elara Vance <span class="text-sm text-stone-500 dark:text-stone-400 font-normal ml-2">@elaravance</span></p>
            <p class="text-stone-700 dark:text-stone-300 leading-relaxed">Just concluded a thrilling discussion on 'Sustainable Ecosystems'! The insights from the audience were truly inspiring. #NaturesSummit2024 #Sustainability</p>
            <div class="mt-3 flex flex-wrap gap-2">
              <a href="#" class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-green-100 dark:bg-green-700 text-green-800 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-600 transition-colors"><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 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.916 9.916 0 01-2.903-.555L5 21l1.618-3.109A9.956 9.956 0 0112 12c4.418 0 8-3.582 8-8s-3.582-8-8-8-8 3.582-8 8a9.956 9.956 0 011.618 3.109L3 21l3.109-1.618A9.956 9.956 0 0112 12z"></path></svg> 12 Comments</a>
              <a href="#" class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-amber-100 dark:bg-amber-700 text-amber-800 dark:text-amber-200 hover:bg-amber-200 dark:hover:bg-amber-600 transition-colors"><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 20.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> 24 Likes</a>
            </div>
            <p class="text-xs text-stone-400 dark:text-stone-500 mt-2">2 hours ago</p>
          </div>
        </div>

        <!-- Activity Item 2 -->
        <div class="flex items-start">
          <div class="w-12 h-12 sm:w-16 sm:h-16 flex-shrink-0 relative group">
            <img class="w-full h-full rounded-full object-cover border-4 border-amber-500 dark:border-amber-600 outline outline-2 outline-offset-2 outline-green-300 dark:outline-green-700 transition-transform duration-300 ease-in-out group-hover:scale-110" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
            <span class="absolute bottom-0 right-0 block w-4 h-4 sm:w-5 sm:h-5 bg-blue-500 rounded-full ring-2 ring-white dark:ring-stone-850"></span>
          </div>
          <div class="ml-4 flex-grow relative px-4 py-3 sm:px-6 sm:py-4 bg-stone-50 dark:bg-stone-800 rounded-2xl rounded-tl-none shadow-md border border-stone-200 dark:border-stone-700 before:absolute before:content-[''] before:left-0 before:top-0 before:w-0 before:h-0 before:border-8 before:border-transparent before:border-r-stone-50 dark:before:border-r-stone-800 before:-ml-4 transition duration-300 ease-in-out hover:shadow-lg">
            <p class="text-stone-900 dark:text-stone-100 font-semibold mb-1">Botanist Ben <span class="text-sm text-stone-500 dark:text-stone-400 font-normal ml-2">@plantwhisperer</span></p>
            <p class="text-stone-700 dark:text-stone-300 leading-relaxed">New photo added! Exploring the local flora on the 'Forest Secrets' nature walk. So much beauty in every corner! 🌲🌿</p>
            <div class="mt-3 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
              <a href="#" class="block aspect-video rounded-lg overflow-hidden group">
                <img class="object-cover w-full h-full transform transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/400/250?random=1" alt="Nature Photo">
              </a>
              <a href="#" class="block aspect-video rounded-lg overflow-hidden group sm:block hidden">
                <img class="object-cover w-full h-full transform transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/400/250?random=2" alt="Nature Photo">
              </a>
              <a href="#" class="block aspect-video rounded-lg overflow-hidden group lg:block hidden">
                <img class="object-cover w-full h-full transform transition-transform duration-300 group-hover:scale-105" src="https://picsum.photos/400/250?random=3" alt="Nature Photo">
              </a>
            </div>
            <p class="text-xs text-stone-400 dark:text-stone-500 mt-2">4 hours ago</p>
          </div>
        </div>

        <!-- Activity Item 3 -->
        <div class="flex items-start">
          <div class="w-12 h-12 sm:w-16 sm:h-16 flex-shrink-0 relative group">
            <img class="w-full h-full rounded-full object-cover border-4 border-amber-500 dark:border-amber-600 outline outline-2 outline-offset-2 outline-green-300 dark:outline-green-700 transition-transform duration-300 ease-in-out group-hover:scale-110" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
            <span class="absolute bottom-0 right-0 block w-4 h-4 sm:w-5 sm:h-5 bg-yellow-500 rounded-full ring-2 ring-white dark:ring-stone-850"></span>
          </div>
          <div class="ml-4 flex-grow relative px-4 py-3 sm:px-6 sm:py-4 bg-stone-50 dark:bg-stone-800 rounded-2xl rounded-tl-none shadow-md border border-stone-200 dark:border-stone-700 before:absolute before:content-[''] before:left-0 before:top-0 before:w-0 before:h-0 before:border-8 before:border-transparent before:border-r-stone-50 dark:before:border-r-stone-800 before:-ml-4 transition duration-300 ease-in-out hover:shadow-lg">
            <p class="text-stone-900 dark:text-stone-100 font-semibold mb-1">Conference Schedule Update <span class="text-sm text-stone-500 dark:text-stone-400 font-normal ml-2">@summitadmin</span></p>
            <div class="p-4 rounded-lg bg-emerald-100 dark:bg-emerald-800 border border-emerald-200 dark:border-emerald-700 flex items-center justify-between flex-wrap gap-3">
              <div>
                <p class="font-bold text-emerald-800 dark:text-emerald-100">Room Change for 'Future of Forests' Session!</p>
                <p class="text-sm text-emerald-700 dark:text-emerald-200">The session 'The Future of Forests' with Dr. Anya Sharma has been moved to <span class="font-semibold">Oak Hall (Room 305)</span> at 14:00.</p>
              </div>
              <a href="#" class="inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-full bg-emerald-600 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 text-white transition-colors">
                View Updated Schedule
                <svg class="w-4 h-4 ml-2" 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="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
              </a>
            </div>
            <p class="text-xs text-stone-400 dark:text-stone-500 mt-2">6 hours ago</p>
          </div>
        </div>

        <!-- Activity Item 4 -->
        <div class="flex items-start">
          <div class="w-12 h-12 sm:w-16 sm:h-16 flex-shrink-0 relative group">
            <img class="w-full h-full rounded-full object-cover border-4 border-amber-500 dark:border-amber-600 outline outline-2 outline-offset-2 outline-green-300 dark:outline-green-700 transition-transform duration-300 ease-in-out group-hover:scale-110" src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar">
            <span class="absolute bottom-0 right-0 block w-4 h-4 sm:w-5 sm:h-5 bg-purple-500 rounded-full ring-2 ring-white dark:ring-stone-850"></span>
          </div>
          <div class="ml-4 flex-grow relative px-4 py-3 sm:px-6 sm:py-4 bg-stone-50 dark:bg-stone-800 rounded-2xl rounded-tl-none shadow-md border border-stone-200 dark:border-stone-700 before:absolute before:content-[''] before:left-0 before:top-0 before:w-0 before:h-0 before:border-8 before:border-transparent before:border-r-stone-50 dark:before:border-r-stone-800 before:-ml-4 transition duration-300 ease-in-out hover:shadow-lg">
            <p class="text-stone-900 dark:text-stone-100 font-semibold mb-1">EcoWarrior Lily <span class="text-sm text-stone-500 dark:text-stone-400 font-normal ml-2">@lily_eco_quest</span></p>
            <p class="text-stone-700 dark:text-stone-300 leading-relaxed">Engaging panel on 'Climate Action for All'! Feeling so motivated to make a difference. Let's work together for a greener future! 🌍</p>
            <div class="mt-3">
              <video controls class="w-full h-auto rounded-lg shadow-md border border-stone-300 dark:border-stone-700" poster="https://picsum.photos/400/250?random=4">
                <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
                Your browser does not support the video tag.
              </video>
            </div>
            <div class="mt-3 flex flex-wrap gap-2">
              <a href="#" class="inline-flex items-center px-3 py-1 text-sm font-medium rounded-full bg-violet-100 dark:bg-violet-700 text-violet-800 dark:text-violet-200 hover:bg-violet-200 dark:hover:bg-violet-600 transition-colors"><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="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M18.364 18.364l-.707-.707M12 21v-1m-6.364-1.636l.707-.707M3 12H4m1.636-6.364l.707-.707M6 10v4a2 2 0 002 2h3.586a1 1 0 00.707-.293l2.414-2.414a1 1 0 00-.707-1.707L12 9l-.586-.586A2 2 0 009 8h-3a2 2 0 00-2 2z"></path></svg> Share Event</a>
            </div>
            <p class="text-xs text-stone-400 dark:text-stone-500 mt-2">11 hours ago</p>
          </div>
        </div>

      </div>

      <div class="mt-10 text-center">
        <button class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-green-700 hover:bg-green-800 dark:bg-green-600 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-offset-stone-850 transform transition-transform duration-200 ease-out hover:scale-105 active:scale-95">
          Load More Activities
          <svg class="ml-3 -mr-1 h-5 w-5" 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="M19 9l-7 7-7-7"></path></svg>
        </button>
      </div>

    </div>
  </div>
</div>