Activity Feed 구성 요소
브루탈리즘 스타일의 Activity Feed Component는 반응형 디자인, 고대비 레이아웃, Tailwind CSS를 사용한 다크 모드 지원을 제공합니다.
HTML 코드
<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>