Activity Feed 구성 요소
레트로/빈티지 80년대/90년대 미학, 단색 색 구성표, 블로그/콘텐츠 소비를 위한 적당한 복잡성을 갖춘 활동 피드 구성 요소. Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 디자인. picsum.photos의 이미지와 randomuser.me 의 아바타.
HTML 코드
<div class="container mx-auto px-4 py-8 bg-gray-200 dark:bg-gray-800">
<h2 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Activity Feed</h2>
<!-- Activity Item -->
<div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md mb-6">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
<div>
<p class="font-bold text-gray-800 dark:text-gray-200">John Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">posted a new article</p>
</div>
</div>
<h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-200">The Future of Web Development</h3>
<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-sm text-gray-600 dark:text-gray-400">
<span>2 hours ago</span>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Read more</a>
</div>
</div>
<!-- Activity Item -->
<div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md mb-6">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
<div>
<p class="font-bold text-gray-800 dark:text-gray-200">Jane Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-400">commented on a post</p>
</div>
</div>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Great insightful article, John! I learned a lot.</p>
<div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
<span>4 hours ago</span>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">View post</a>
</div>
</div>
<!-- Activity Item -->
<div class="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-4">
<div>
<p class="font-bold text-gray-800 dark:text-gray-200">Peter Jones</p>
<p class="text-sm text-gray-600 dark:text-gray-400">liked an article</p>
</div>
</div>
<h3 class="text-xl font-semibold mb-2 text-gray-800 dark:text-gray-200">10 Tips for Better Productivity</h3>
<div class="flex justify-between items-center text-sm text-gray-600 dark:text-gray-400">
<span>6 hours ago</span>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">View article</a>
</div>
</div>
</div>