브루탈리즘 단색 활동 피드
단순하고 브루탈리즘에서 영감을 받은 활동 피드 구성 요소로, 단색 색 구성표가 있으며 비즈니스/기업 웹사이트에 적합합니다. 높은 대비, 대담한 타이포그래피, 다크 모드 지원을 통한 완벽한 응답성을 제공합니다.
HTML 코드
<div class="font-mono min-h-screen bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 md:p-8 lg:p-10">
<div class="max-w-4xl mx-auto border-4 border-black dark:border-white bg-gray-200 dark:bg-gray-800 shadow-md transform -rotate-1 skew-x-1 p-0.5">
<div class="bg-gray-50 dark:bg-gray-950 p-6 sm:p-8 lg:p-10 border-4 border-black dark:border-white transform rotate-1 -skew-x-1">
<h2 class="text-4xl sm:text-5xl md:text-6xl font-extrabold mb-8 text-black dark:text-white uppercase leading-none skew-y-2 transform -translate-x-2">
Activity <br class="sm:hidden"/>Feed
</h2>
<div class="space-y-6 sm:space-y-8 lg:space-y-10">
<!-- Activity Item 1: New Project -->
<div class="relative p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-white shadow-xl transform hover:scale-105 transition-transform duration-200 ease-out">
<span class="absolute -top-3 -left-3 bg-red-600 text-white text-xs px-2 py-1 uppercase font-bold transform rotate-6">NEW!</span>
<div class="flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
<img class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-black dark:border-white shadow-lg transform -rotate-3" src="https://randomuser.me/api/portraits/men/7.jpg" alt="User Avatar">
<div>
<p class="text-lg sm:text-xl font-bold text-black dark:text-white uppercase mb-1">
<span class="text-gray-700 dark:text-gray-300">John Doe</span> created <span class="text-black dark:text-white underline decoration-wavy decoration-2">'Project Alpha'</span>
</p>
<p class="text-sm text-gray-600 dark:text-gray-400 font-bold block sm:inline-block border-b-2 border-black dark:border-white pb-1 sm:pb-0">2 hours ago</p>
</div>
</div>
</div>
<!-- Activity Item 2: Task Update -->
<div class="relative p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-white shadow-xl transform hover:scale-105 transition-transform duration-200 ease-out">
<div class="flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
<img class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-black dark:border-white shadow-lg transform rotate-2" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
<div>
<p class="text-lg sm:text-xl font-bold text-black dark:text-white uppercase mb-1">
<span class="text-gray-700 dark:text-gray-300">Jane Smith</span> updated <span class="text-black dark:text-white underline decoration-wavy decoration-2">'Task #123'</span>
</p>
<p class="text-sm text-gray-600 dark:text-gray-400 font-bold block sm:inline-block border-b-2 border-black dark:border-white pb-1 sm:pb-0">4 hours ago</p>
</div>
</div>
</div>
<!-- Activity Item 3: File Upload -->
<div class="relative p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-white shadow-xl transform hover:scale-105 transition-transform duration-200 ease-out">
<div class="flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
<img class="w-16 h-16 sm:w-20 sm:h-20 object-cover border-2 border-black dark:border-white shadow-lg transform -rotate-5" src="https://randomuser.me/api/portraits/men/44.jpg" alt="User Avatar">
<div>
<p class="text-lg sm:text-xl font-bold text-black dark:text-white uppercase mb-1">
<span class="text-gray-700 dark:text-gray-300">Robert Brown</span> uploaded <span class="text-black dark:text-white underline decoration-wavy decoration-2">'report_Q3.pdf'</span>
</p>
<p class="text-sm text-gray-600 dark:text-gray-400 font-bold block sm:inline-block border-b-2 border-black dark:border-white pb-1 sm:pb-0">Yesterday</p>
</div>
</div>
</div>
</div>
</div>
<div class="absolute bottom-2 right-2 text-xs text-black dark:text-white font-bold transform -rotate-3">LIVE FEED</div>
</div>
</div>