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