Activity Feed 구성 요소
세피아/갈색 톤의 종이/인쇄물에서 영감을 받은 스타일로 디자인된 반응형 활동 피드 구성 요소로, 포럼 및 커뮤니티 플랫폼에 적합합니다. 다크 모드 지원이 포함됩니다.
HTML 코드
<div class="min-h-screen bg-stone-100 dark:bg-stone-900 font-sans p-4 sm:p-6 md:p-8 lg:p-10 transition-colors duration-300">
<div class="max-w-4xl mx-auto bg-white dark:bg-stone-800 shadow-lg rounded-lg overflow-hidden border border-stone-200 dark:border-stone-700 font-serif">
<!-- Header -->
<div class="bg-stone-200 dark:bg-stone-700 p-4 border-b border-stone-300 dark:border-stone-600 flex items-center justify-between">
<h2 class="text-2xl font-bold text-stone-800 dark:text-stone-200 tracking-wide">Recent Activity</h2>
<button class="flex items-center text-sm text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
<svg class="w-4 h-4 mr-1" 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="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.942 3.333.91 2.222 2.419a1.724 1.724 0 00.045 2.112c1.292 1.41-0.291 3.244-1.921 3.568a1.724 1.724 0 00-1.065 2.572c.945 1.543-.91 3.333-2.419 2.222a1.724 1.724 0 00-2.112.045c-1.41 1.292-3.244-.291-3.568-1.921a1.724 1.724 0 00-2.572-1.065c-1.543.945-3.333-.91-2.222-2.419a1.724 1.724 0 00-.045-2.112c-1.292-1.41 0.291-3.244 1.921-3.568a1.724 1.724 0 001.065-2.572c-.945-1.543.91-3.333 2.419-2.222a1.724 1.724 0 002.112-.045z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
<span>Filter</span>
</button>
</div>
<!-- Activity List -->
<div class="divide-y divide-stone-200 dark:divide-stone-700">
<!-- Activity Item 1: New Thread -->
<div class="p-4 sm:p-6 transition-colors duration-200 hover:bg-stone-50 dark:hover:bg-stone-700/50">
<div class="flex items-start">
<img class="w-10 h-10 rounded-full mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="flex-grow">
<p class="text-stone-800 dark:text-stone-200 leading-relaxed">
<a href="#" class="font-semibold text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100">John Doe</a> started a new thread:
<a href="#" class="font-medium text-amber-700 dark:text-amber-400 hover:underline ml-1">
'Tips for maintaining a vintage typewriter'
</a>
</p>
<p class="text-sm text-stone-500 dark:text-stone-400 mt-1">2 hours ago in <a href="#" class="text-stone-600 dark:text-stone-300 hover:underline">'Antiques & Collectibles'</a></p>
<div class="flex space-x-3 mt-3 text-sm text-stone-600 dark:text-stone-400">
<span class="flex items-center"><svg class="w-4 h-4 mr-1" 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.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 5</span>
<span class="flex items-center"><svg class="w-4 h-4 mr-1" 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 8h10M7 12h10M7 16h10M9 6h6m-3 0V4m-3 0H6m-3 0v4m0 0h4m-4 0v-4m0 4l-4 4m4-4l4 4m0 0l-4-4m4 4v4m0 0h4m-4 0v-4m0 4l4-4"></path></svg> 12 comments</span>
</div>
</div>
</div>
</div>
<!-- Activity Item 2: New Post -->
<div class="p-4 sm:p-6 transition-colors duration-200 hover:bg-stone-50 dark:hover:bg-stone-700/50">
<div class="flex items-start">
<img class="w-10 h-10 rounded-full mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/women/67.jpg" alt="User Avatar">
<div class="flex-grow">
<p class="text-stone-800 dark:text-stone-200 leading-relaxed">
<a href="#" class="font-semibold text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100">Jane Smith</a> posted a reply in
<a href="#" class="font-medium text-amber-700 dark:text-amber-400 hover:underline ml-1">
'Upcoming Local Book Fair'
</a>
</p>
<blockquote class="border-l-4 border-stone-300 dark:border-stone-600 pl-4 py-2 mt-3 mb-2 italic text-stone-700 dark:text-stone-300 bg-stone-50 dark:bg-stone-700/60 rounded-sm">
"I'm really excited about the selection this year. Anyone know if there will be any workshops on calligraphy?"
</blockquote>
<p class="text-sm text-stone-500 dark:text-stone-400 mt-1">5 hours ago in <a href="#" class="text-stone-600 dark:text-stone-300 hover:underline">'Local Events'</a></p>
<div class="flex space-x-3 mt-3 text-sm text-stone-600 dark:text-stone-400">
<span class="flex items-center"><svg class="w-4 h-4 mr-1" 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.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 8</span>
<span class="flex items-center"><svg class="w-4 h-4 mr-1" 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 8h10M7 12h10M7 16h10M9 6h6m-3 0V4m-3 0H6m-3 0v4m0 0h4m-4 0v-4m0 4l-4 4m4-4l4 4m0 0l-4-4m4 4v4m0 0h4m-4 0v-4m0 4l4-4"></path></svg> 27 replies</span>
</div>
</div>
</div>
</div>
<!-- Activity Item 3: New File Upload -->
<div class="p-4 sm:p-6 transition-colors duration-200 hover:bg-stone-50 dark:hover:bg-stone-700/50">
<div class="flex items-start">
<img class="w-10 h-10 rounded-full mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar">
<div class="flex-grow">
<p class="text-stone-800 dark:text-stone-200 leading-relaxed">
<a href="#" class="font-semibold text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100">Michael Green</a> uploaded a new file:
<a href="#" class="font-medium text-amber-700 dark:text-amber-400 hover:underline ml-1 flex items-center">
<svg class="w-5 h-5 mr-1" 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="M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
'Old Maps Collection.rar'
</a>
</p>
<img class="w-full h-32 sm:h-48 object-cover rounded-md mt-3 mb-2 border border-stone-200 dark:border-stone-600" src="https://picsum.photos/600/300?random=1" alt="Uploaded Image">
<p class="text-sm text-stone-500 dark:text-stone-400 mt-1">1 day ago in <a href="#" class="text-stone-600 dark:text-stone-300 hover:underline">'Historical Archives'</a></p>
<div class="flex space-x-3 mt-3 text-sm text-stone-600 dark:text-stone-400">
<span class="flex items-center"><svg class="w-4 h-4 mr-1" 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.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg> 15</span>
<span class="flex items-center"><svg class="w-4 h-4 mr-1" 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 8h10M7 12h10M7 16h10M9 6h6m-3 0V4m-3 0H6m-3 0v4m0 0h4m-4 0v-4m0 4l-4 4m4-4l4 4m0 0l-4-4m4 4v4m0 0h4m-4 0v-4m0 4l4-4"></path></svg> 9 comments</span>
</div>
</div>
</div>
</div>
<!-- Activity Item 4: Upvote -->
<div class="p-4 sm:p-6 transition-colors duration-200 hover:bg-stone-50 dark:hover:bg-stone-700/50">
<div class="flex items-start">
<img class="w-10 h-10 rounded-full mr-4 flex-shrink-0" src="https://randomuser.me/api/portraits/women/5.jpg" alt="User Avatar">
<div class="flex-grow">
<p class="text-stone-800 dark:text-stone-200 leading-relaxed">
<a href="#" class="font-semibold text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100">Sarah Lee</a> upvoted a post by
<a href="#" class="font-semibold text-stone-700 dark:text-stone-300 hover:text-stone-900 dark:hover:text-stone-100">Emily White</a> in
<a href="#" class="font-medium text-amber-700 dark:text-amber-400 hover:underline ml-1">
'Discussing the merits of paper vs. digital books'
</a>
</p>
<p class="text-sm text-stone-500 dark:text-stone-400 mt-1">2 days ago in <a href="#" class="text-stone-600 dark:text-stone-300 hover:underline">'General Discussion'</a></p>
<div class="flex space-x-3 mt-3 text-sm text-stone-600 dark:text-stone-400">
<span class="flex items-center text-amber-600 dark:text-amber-400"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-1-8a1 1 0 000 2h2a1 1 0 000-2h-2z" clip-rule="evenodd"></path></svg> Upvoted</span>
<span class="flex items-center"><svg class="w-4 h-4 mr-1" 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 8h10M7 12h10M7 16h10M9 6h6m-3 0V4m-3 0H6m-3 0v4m0 0h4m-4 0v-4m0 4l-4 4m4-4l4 4m0 0l-4-4m4 4v4m0 0h4m-4 0v-4m0 4l4-4"></path></svg> 45 replies</span>
</div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="bg-stone-200 dark:bg-stone-700 p-4 border-t border-stone-300 dark:border-stone-600 text-center">
<button class="px-5 py-2 rounded-full bg-amber-700 text-white dark:bg-amber-600 hover:bg-amber-800 dark:hover:bg-amber-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50 text-sm font-medium tracking-wide">
Load More Activity
</button>
</div>
</div>
</div>관련 구성 요소
Activity Feed 구성 요소
Neumorphism 디자인, 흙색 색 구성표, 복잡한 레이아웃, 반응형 디자인 및 어두운 테마 지원이 포함된 활동 피드 구성 요소입니다.
ActivityFeedComponent
블로그 콘텐츠 소비를 위해 설계된 간단한 레트로/빈티지 스타일의 활동 피드 구성 요소로, 단색 파란색 구성표와 Tailwind CSS를 사용한 반응형 다크 모드 지원이 특징입니다.