Activity Feed 구성 요소
Bauhaus에서 영감을 받은 디자인의 반응형 활동 피드 구성 요소로, 기술/SaaS 애플리케이션에 적합한 기본 색상 액센트가 있는 흑백 모노초메를 특징으로 합니다. 다크 모드 지원이 포함됩니다.
HTML 코드
<div class="font-sans antialiased text-gray-900 bg-gray-100 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-6 md:p-8 min-h-screen">
<div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
<div class="bg-black dark:bg-gray-950 p-4 sm:p-5 flex items-center justify-between border-b-4 border-red-500">
<h2 class="text-xl sm:text-2xl font-bold uppercase tracking-wider text-white">Activity Feed</h2>
<button class="p-2 rounded-full text-white hover:bg-white hover:text-black focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-75 transition duration-300 ease-in-out">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
</button>
</div>
<div class="p-4 sm:p-6 space-y-6 sm:space-y-8">
<!-- Activity Item 1 -->
<div class="flex items-start space-x-4">
<div class="flex-shrink-0 animate-pulse">
<img class="w-10 h-10 rounded-full object-cover border-2 border-red-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
</div>
<div class="flex-grow min-w-0">
<div class="text-sm text-gray-500 dark:text-gray-400 mb-1 flex justify-between items-center">
<span class="font-medium text-gray-700 dark:text-gray-300">John Doe</span> changed the status of <span class="font-medium text-gray-700 dark:text-gray-300">Task #1234</span>
<time datetime="2023-10-27T14:30:00Z" class="ml-2 text-xs">2 hours ago</time>
</div>
<div class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 p-3 rounded-md shadow-inner text-sm">
<p class="text-gray-700 dark:text-gray-300 font-bold mb-1">Status Update:</p>
<p class="text-gray-600 dark:text-gray-400">From <span class="px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">In Progress</span> to <span class="px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">Completed</span></p>
</div>
</div>
</div>
<!-- Activity Item 2 -->
<div class="flex items-start space-x-4">
<div class="flex-shrink-0">
<img class="w-10 h-10 rounded-full object-cover border-2 border-red-500" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
</div>
<div class="flex-grow min-w-0">
<div class="text-sm text-gray-500 dark:text-gray-400 mb-1 flex justify-between items-center">
<span class="font-medium text-gray-700 dark:text-gray-300">Jane Smith</span> added 3 new files to <span class="font-medium text-gray-700 dark:text-gray-300">Project Alpha</span>
<time datetime="2023-10-27T13:00:00Z" class="ml-2 text-xs">3 hours ago</time>
</div>
<div class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 p-3 rounded-md shadow-inner">
<ul class="text-sm text-gray-600 dark:text-gray-400 space-y-1">
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>design_mockup_v2.png</li>
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>requirements.pdf</li>
<li class="flex items-center"><svg class="w-4 h-4 mr-2 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>project_plan.xlsx</li>
</ul>
</div>
</div>
</div>
<!-- Activity Item 3 -->
<div class="flex items-start space-x-4">
<div class="flex-shrink-0">
<img class="w-10 h-10 rounded-full object-cover border-2 border-red-500" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
</div>
<div class="flex-grow min-w-0">
<div class="text-sm text-gray-500 dark:text-gray-400 mb-1 flex justify-between items-center">
<span class="font-medium text-gray-700 dark:text-gray-300">Robert Brown</span> commented on <span class="font-medium text-gray-700 dark:text-gray-300">Bug Report #567</span>
<time datetime="2023-10-27T10:15:00Z" class="ml-2 text-xs">6 hours ago</time>
</div>
<div class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 p-3 rounded-md shadow-inner text-sm">
<p class="text-gray-700 dark:text-gray-300">"I've replicated the bug on Firefox 118. It seems to be related to the new authentication flow. Investigating a fix now."</p>
</div>
</div>
</div>
<!-- Activity Item 4 -->
<div class="flex items-start space-x-4">
<div class="flex-shrink-0">
<img class="w-10 h-10 rounded-full object-cover border-2 border-red-500" src="https://randomuser.me/api/portraits/women/62.jpg" alt="User Avatar">
</div>
<div class="flex-grow min-w-0">
<div class="text-sm text-gray-500 dark:text-gray-400 mb-1 flex justify-between items-center">
<span class="font-medium text-gray-700 dark:text-gray-300">Emily White</span> invited <span class="font-medium text-gray-700 dark:text-gray-300">David Green</span> to the team
<time datetime="2023-10-27T09:00:00Z" class="ml-2 text-xs">8 hours ago</time>
</div>
<div class="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 p-3 rounded-md shadow-inner">
<div class="flex items-center space-x-3">
<img class="w-8 h-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/70.jpg" alt="Invited User Avatar">
<div>
<p class="text-gray-700 dark:text-gray-300 font-medium">David Green</p>
<p class="text-gray-600 dark:text-gray-400 text-xs">[email protected]</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-gray-50 dark:bg-gray-700 p-4 sm:p-5 border-t border-gray-200 dark:border-gray-600 flex justify-center">
<button class="px-6 py-2 bg-red-500 text-white font-semibold rounded-md shadow-md hover:bg-black dark:hover:bg-gray-950 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 transition duration-300 ease-in-out uppercase tracking-wide text-sm">
Load More
</button>
</div>
</div>
</div>관련 구성 요소
ActivityFeedComponent
블로그 콘텐츠 소비를 위해 설계된 간단한 레트로/빈티지 스타일의 활동 피드 구성 요소로, 단색 파란색 구성표와 Tailwind CSS를 사용한 반응형 다크 모드 지원이 특징입니다.
브루탈리즘 단색 활동 피드
단순하고 브루탈리즘에서 영감을 받은 활동 피드 구성 요소로, 단색 색 구성표가 있으며 비즈니스/기업 웹사이트에 적합합니다. 높은 대비, 대담한 타이포그래피, 다크 모드 지원을 통한 완벽한 응답성을 제공합니다.
Activity Feed 구성 요소
레트로/빈티지 80년대/90년대 미학, 단색 색 구성표, 블로그/콘텐츠 소비를 위한 적당한 복잡성을 갖춘 활동 피드 구성 요소. Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 디자인. picsum.photos의 이미지와 randomuser.me 의 아바타.