검색 구성 요소

카테고리

활동 피드

사용자 또는 시스템 활동의 스트림

Activity Feed 구성 요소

Neumorphism 디자인, 흙색 색 구성표, 복잡한 레이아웃, 반응형 디자인 및 어두운 테마 지원이 포함된 활동 피드 구성 요소입니다.

                <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>

Activity Feed 구성 요소

마이크로 인터랙션과 어두운 테마가 있는 전자 상거래를 위한 복잡한 활동 피드 구성 요소로, Tailwind CSS를 사용하여 스타일링되었습니다.

열다 미리 보기

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Activity Feed</h2>
    <div class="space-y-4">
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-start space-x-4">
                <img src="https://i.pravatar.cc/150?img=3" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="flex-1">
                    <p class="text-gray-700 dark:text-gray-300 font-semibold">John Doe</p>
                    <p class="text-gray-600 dark:text-gray-400">Just purchased a new phone!</p>
                    <p class="text-sm text-gray-500 dark:text-gray-500">5 minutes ago</p>
                </div>
            </div>
            <img src="https://picsum.photos/200/100" alt="Product Image" class="mt-2 rounded-md transition-transform transform hover:scale-105 duration-300">
        </div>
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-start space-x-4">
                <img src="https://i.pravatar.cc/150?img=5" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="flex-1">
                    <p class="text-gray-700 dark:text-gray-300 font-semibold">Jane Smith</p>
                    <p class="text-gray-600 dark:text-gray-400">Left a review for "Wireless Headphones"!</p>
                    <p class="text-sm text-gray-500 dark:text-gray-500">10 minutes ago</p>
                </div>
            </div>
            <img src="https://picsum.photos/200/100?random=1" alt="Product Image" class="mt-2 rounded-md transition-transform transform hover:scale-105 duration-300">
        </div>
        <div class="bg-white dark:bg-gray-900 p-4 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
            <div class="flex items-start space-x-4">
                <img src="https://i.pravatar.cc/150?img=7" alt="User Avatar" class="w-10 h-10 rounded-full">
                <div class="flex-1">
                    <p class="text-gray-700 dark:text-gray-300 font-semibold">Alice Johnson</p>
                    <p class="text-gray-600 dark:text-gray-400">Started following you!</p>
                    <p class="text-sm text-gray-500 dark:text-gray-500">15 minutes ago</p>
                </div>
            </div>
        </div>
    </div>
</div>

Activity Feed 구성 요소

Material Design, Grayscale 색 구성표, 중간 복잡성 및 다크 모드를 지원하는 Activity Feed 구성 요소

열다 미리 보기

                <div class="container mx-auto px-4 py-8 dark:bg-gray-900">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    </div>

    <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mb-4">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <div>
          <p class="text-gray-800 dark:text-white font-semibold text-lg">John Doe</p>
          <p class="text-gray-500 dark:text-gray-400 text-sm">Posted an update</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
        <span>2 hours ago</span>
        </div>
    </div>

      <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mb-4">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
        <div>
          <p class="text-gray-800 dark:text-white font-semibold text-lg">Jane Smith</p>
          <p class="text-gray-500 dark:text-gray-400 text-sm">Commented on a post</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
        <span>4 hours ago</span>
      </div>
    </div>

    <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mb-4">
      <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar">
        <div>
          <p class="text-gray-800 dark:text-white font-semibold text-lg">Peter Jones</p>
          <p class="text-gray-500 dark:text-gray-400 text-sm">Liked a post</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
       <div class="flex justify-between items-center text-gray-500 dark:text-gray-400 text-sm">
        <span>6 hours ago</span>
       </div>
    </div>
  </div>
</div>

Activity Feed 구성 요소

뉴모픽 디자인 스타일의 반응형 활동 피드 구성 요소로, 밝은 테마와 어두운 테마를 모두 지원합니다.

열다 미리 보기

                <div class='flex flex-col items-center p-6 bg-gray-200 dark:bg-gray-900 rounded-lg shadow-lg'>
    <h2 class='text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4'>Activity Feed</h2>
    <div class='w-full space-y-4'>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/men/1.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>John Doe</p>
                    <p class='text-gray-500 dark:text-gray-400'>Added a new post.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/women/1.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Jane Smith</p>
                    <p class='text-gray-500 dark:text-gray-400'>Commented on your photo.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/men/2.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Mark Johnson</p>
                    <p class='text-gray-500 dark:text-gray-400'>Liked your comment.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://randomuser.me/api/portraits/women/2.jpg' alt='User Avatar' class='w-10 h-10 rounded-full mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Emily Davis</p>
                    <p class='text-gray-500 dark:text-gray-400'>Started following you.</p>
                </div>
            </div>
        </div>
        <div class='p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all'>
            <div class='flex items-center'>
                <img src='https://picsum.photos/200/200' alt='Random Image' class='w-10 h-10 mr-4'>
                <div>
                    <p class='font-semibold text-gray-700 dark:text-gray-300'>Random Image</p>
                    <p class='text-gray-500 dark:text-gray-400'>Posted a new image.</p>
                </div>
            </div>
        </div>
    </div>
</div>

Activity Feed 구성 요소

브루탈리즘 스타일의 Activity Feed Component는 반응형 디자인, 고대비 레이아웃, Tailwind CSS를 사용한 다크 모드 지원을 제공합니다.

열다 미리 보기

                <div class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg p-4 max-w-md w-full">
    <h1 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Activity Feed</h1>
    <div class="space-y-4">
        <div class="flex items-start p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Posted a new article</p>
                <p class="text-gray-500 dark:text-gray-500 text-sm">10 mins ago</p>
            </div>
        </div>
        <div class="flex items-start p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Commented on your post</p>
                <p class="text-gray-500 dark:text-gray-500 text-sm">15 mins ago</p>
            </div>
        </div>
        <div class="flex items-start p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Mike Brown</p>
                <p class="text-gray-600 dark:text-gray-400">Liked your photo</p>
                <p class="text-gray-500 dark:text-gray-500 text-sm">30 mins ago</p>
            </div>
        </div>
        <div class="flex items-start p-3 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
            <div class="ml-3">
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Emma Wilson</p>
                <p class="text-gray-600 dark:text-gray-400">Started following you</p>
                <p class="text-gray-500 dark:text-gray-500 text-sm">1 hour ago</p>
            </div>
        </div>
    </div>
    <div class="mt-4">
        <img src="https://picsum.photos/400/200" alt="Placeholder Image" class="w-full h-32 object-cover rounded-md shadow-md" />
    </div>
</div>

Activity Feed 구성 요소

Tailwind CSS를 사용하여 다크 모드 UI용으로 설계된 반응형 활동 피드 구성 요소입니다.

열다 미리 보기

                <div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold mb-4">Activity Feed</h2>
    <ul class="space-y-4">
        <li class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-700 p-4 rounded-lg flex-1">
                <p class="font-semibold">John Doe</p>
                <p class="text-gray-400">Commented on your post</p>
                <span class="text-gray-500 text-sm">2 hours ago</span>
            </div>
        </li>
        <li class="flex items-start">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-700 p-4 rounded-lg flex-1">
                <p class="font-semibold">Jane Smith</p>
                <p class="text-gray-400">Liked your photo</p>
                <span class="text-gray-500 text-sm">4 hours ago</span>
            </div>
        </li>
        <li class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-700 p-4 rounded-lg flex-1">
                <p class="font-semibold">Sam Wilson</p>
                <p class="text-gray-400">Started following you</p>
                <span class="text-gray-500 text-sm">6 hours ago</span>
            </div>
        </li>
        <li class="flex items-start">
            <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-700 p-4 rounded-lg flex-1">
                <p class="font-semibold">Lisa Ray</p>
                <p class="text-gray-400">Shared your article</p>
                <span class="text-gray-500 text-sm">1 day ago</span>
            </div>
        </li>
        <li class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="bg-gray-700 p-4 rounded-lg flex-1">
                <p class="font-semibold">Michael Brown</p>
                <p class="text-gray-400">Added a photo</p>
                <span class="text-gray-500 text-sm">2 days ago</span>
            </div>
        </li>
    </ul>
</div>

Activity Feed 구성 요소

어두운 테마를 지원하는 3D 스타일로 디자인된 반응형 활동 피드 구성 요소로, 깊이와 참여를 위해 3차원 요소를 통합합니다.

열다 미리 보기

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg transition-transform transform hover:scale-105">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Activity Feed</h2>
    <div class="space-y-4">  
        <!-- Activity Item -->
        <div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Liked your post about web development.</p>
                <span class="text-sm text-gray-500 dark:text-gray-500">2 hours ago</span>
            </div>
        </div>
        
        <!-- Activity Item -->
        <div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Commented on your picture.</p>
                <span class="text-sm text-gray-500 dark:text-gray-500">5 hours ago</span>
            </div>
        </div>
        
        <!-- Activity Item -->
        <div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Mike Johnson</p>
                <p class="text-gray-600 dark:text-gray-400">Started following you.</p>
                <span class="text-sm text-gray-500 dark:text-gray-500">1 day ago</span>
            </div>
        </div>
        
        <!-- Activity Item -->
        <div class="flex items-start transition-shadow hover:shadow-xl bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
            <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-semibold">Emily Davis</p>
                <p class="text-gray-600 dark:text-gray-400">Shared your post.</p>
                <span class="text-sm text-gray-500 dark:text-gray-500">3 days ago</span>
            </div>
        </div>
    </div>
    
    <div class="mt-6 text-center">
        <img class="rounded-lg transition-transform transform hover:scale-105" src="https://picsum.photos/400/200?random=1" alt="Placeholder Image">
    </div>
</div>

활동 피드 구성 요소 41

Tailwind CSS로 구축된 깊이 효과와 어두운 테마 지원을 통합한 3D 디자인 스타일의 반응형 활동 피드 구성 요소입니다.

열다 미리 보기

                <div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 shadow-lg rounded-lg transform hover:scale-105 transition-transform duration-200 ease-in-out">
    <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Activity Feed</h2>

    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="flex-1">
            <p class="text-gray-700 dark:text-gray-300 font-medium">John Doe</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Just created a new project!</p>
            <p class="text-gray-400 dark:text-gray-500 text-xs">2 minutes ago</p>
        </div>
    </div>

    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="flex-1">
            <p class="text-gray-700 dark:text-gray-300 font-medium">Jane Smith</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Liked your post.</p>
            <p class="text-gray-400 dark:text-gray-500 text-xs">10 minutes ago</p>
        </div>
    </div>

    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="flex-1">
            <p class="text-gray-700 dark:text-gray-300 font-medium">Steve Brown</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Commented on your photo.</p>
            <p class="text-gray-400 dark:text-gray-500 text-xs">20 minutes ago</p>
        </div>
    </div>

    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="flex-1">
            <p class="text-gray-700 dark:text-gray-300 font-medium">Alice Johnson</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Started following you.</p>
            <p class="text-gray-400 dark:text-gray-500 text-xs">30 minutes ago</p>
        </div>
    </div>

    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="flex-1">
            <p class="text-gray-700 dark:text-gray-300 font-medium">Michael Green</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Updated his status.</p>
            <p class="text-gray-400 dark:text-gray-500 text-xs">1 hour ago</p>
        </div>
    </div>

    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="flex-1">
            <p class="text-gray-700 dark:text-gray-300 font-medium">Emily Davis</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Shared a photo.</p>
            <p class="text-gray-400 dark:text-gray-500 text-xs">2 hours ago</p>
        </div>
    </div>

    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="flex-1">
            <p class="text-gray-700 dark:text-gray-300 font-medium">Chris Black</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Joined the group.</p>
            <p class="text-gray-400 dark:text-gray-500 text-xs">3 hours ago</p>
        </div>
    </div>

    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/women/8.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-md">
        <div class="flex-1">
            <p class="text-gray-700 dark:text-gray-300 font-medium">Olivia White</p>
            <p class="text-gray-500 dark:text-gray-400 text-sm">Sent you a message.</p>
            <p class="text-gray-400 dark:text-gray-500 text-xs">4 hours ago</p>
        </div>
    </div>
</div>