Activity Feed 구성 요소

<div class="container mx-auto p-6 bg-gray-200 dark:bg-gray-800 min-h-screen">

  <!-- Light Mode Neumorphism styles -->
  <style>
    .neumorphic-light {
      border-radius: 1rem;
      background: #e0e0e0;
      box-shadow: 8px 8px 15px #bebebe, -8px -8px 15px #ffffff;
    }

    .neumorphic-light-inset {
      border-radius: 1rem;
      background: #e0e0e0;
      box-shadow: inset 8px 8px 15px #bebebe, inset -8px -8px 15px #ffffff;
    }
  </style>

  <!-- Dark Mode Neumorphism styles -->
  <style>
    @media (prefers-color-scheme: dark) {
      .dark .neumorphic-dark {
        border-radius: 1rem;
        background: #2d3748;
        box-shadow: 8px 8px 15px #1a202c, -8px -8px 15px #454f6a;
      }

      .dark .neumorphic-dark-inset {
        border-radius: 1rem;
        background: #2d3748;
        box-shadow: inset 8px 8px 15px #1a202c, inset -8px -8px 15px #454f6a;
      }
    }
  </style>

  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">

    <!-- Left Sidebar (User Profile / Filters) -->
    <div class="md:col-span-1 p-6 neumorphic-light dark:neumorphic-dark">
      <div class="flex flex-col items-center">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-24 h-24 mb-4 neumorphic-light-inset dark:neumorphic-dark-inset">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
        <p class="text-gray-600 dark:text-gray-400">Blogger & Content Creator</p>
      </div>

      <div class="mt-8">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Filters</h3>
        <ul class="space-y-3">
          <li><a href="#" class="block p-3 rounded-md text-gray-700 dark:text-gray-300 neumorphic-light-inset dark:neumorphic-dark-inset hover:neumorphic-light hover:dark:neumorphic-dark duration-200">All Activity</a></li>
          <li><a href="#" class="block p-3 rounded-md text-gray-700 dark:text-gray-300 neumorphic-light-inset dark:neumorphic-dark-inset hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Comments</a></li>
          <li><a href="#" class="block p-3 rounded-md text-gray-700 dark:text-gray-300 neumorphic-light-inset dark:neumorphic-dark-inset hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Likes</a></li>
          <li><a href="#" class="block p-3 rounded-md text-gray-700 dark:text-gray-300 neumorphic-light-inset dark:neumorphic-dark-inset hover:neumorphic-light hover:dark:neumorphic-dark duration-200">New Posts</a></li>
        </ul>
      </div>
    </div>

    <!-- Main Activity Feed -->
    <div class="md:col-span-2 space-y-6">

      <!-- Activity Card Example 1 -->
      <div class="p-6 neumorphic-light dark:neumorphic-dark">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-4 neumorphic-light-inset dark:neumorphic-dark-inset">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith <span class="font-normal text-gray-600 dark:text-gray-400">commented on</span> "Exploring the Wilds"</p>
            <span class="text-sm text-gray-600 dark:text-gray-400">2 hours ago</span>
          </div>
        </div>
        <p class="text-gray-700 dark:text-gray-300 mb-4">"Great post! I really enjoyed reading about your adventure."</p>
        <div class="flex justify-end space-x-4">
          <button class="text-gray-600 dark:text-gray-400 neumorphic-light-inset dark:neumorphic-dark-inset p-2 rounded-md hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Reply</button>
          <button class="text-gray-600 dark:text-gray-400 neumorphic-light-inset dark:neumorphic-dark-inset p-2 rounded-md hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Like</button>
        </div>
      </div>

      <!-- Activity Card Example 2 -->
      <div class="p-6 neumorphic-light dark:neumorphic-dark">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-4 neumorphic-light-inset dark:neumorphic-dark-inset">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Peter Jones <span class="font-normal text-gray-600 dark:text-gray-400">liked</span> "The Art of Minimalism"</p>
            <span class="text-sm text-gray-600 dark:text-gray-400">5 hours ago</span>
          </div>
        </div>
        <div class="flex justify-end space-x-4">
          <button class="text-gray-600 dark:text-gray-400 neumorphic-light-inset dark:neumorphic-dark-inset p-2 rounded-md hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Undo Like</button>
        </div>
      </div>

      <!-- Activity Card Example 3 (New Post) -->
      <div class="p-6 neumorphic-light dark:neumorphic-dark">
        <div class="flex items-center mb-4">
          <img src="https://randomuser.me/api/portraits/women/60.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-4 neumorphic-light-inset dark:neumorphic-dark-inset">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Emily Davis <span class="font-normal text-gray-600 dark:text-gray-400">published a new post</span> "My Journey in Photography"</p>
            <span class="text-sm text-gray-600 dark:text-gray-400">1 day ago</span>
          </div>
        </div>
        <div class="neumorphic-light dark:neumorphic-dark p-4 rounded-md mb-4">
            <img src="https://picsum.photos/seed/photography/400/200" alt="Post Image" class="rounded-md mb-4 neumorphic-light-inset dark:neumorphic-dark-inset">
            <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">My Journey in Photography</h4>
            <p class="text-gray-700 dark:text-gray-300 line-clamp-3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>

        <div class="flex justify-end space-x-4">
          <button class="text-gray-600 dark:text-gray-400 neumorphic-light-inset dark:neumorphic-dark-inset p-2 rounded-md hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Read Post</button>
          <button class="text-gray-600 dark:text-gray-400 neumorphic-light-inset dark:neumorphic-dark-inset p-2 rounded-md hover:neumorphic-light hover:dark:neumorphic-dark duration-200">Comment</button>
        </div>
      </div>

    </div>

  </div>
</div>