Forum_Community_Cards_Component
포럼 또는 커뮤니티 플랫폼을 위한 반응형 대화형 카드 구성 요소로, 레트로/빈티지 색 구성표와 미묘한 상호 작용을 위한 미묘한 호버 효과를 특징으로 합니다. 다크 모드 지원 및 시맨틱 HTML이 포함됩니다.
HTML 코드
<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
<div class="max-w-7xl mx-auto">
<h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center">Latest Discussions</h2>
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<!-- Card 1 -->
<article class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-xl transition-all duration-300 overflow-hidden
transform hover:-translate-y-1 hover:scale-[1.01] active:scale-[0.99]">
<div class="p-5 flex flex-col h-full">
<div class="flex items-center mb-3">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<p class="text-sm font-semibold text-gray-700 dark:text-gray-200">John Doe</p>
<p class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</p>
</div>
</div>
<h3 class="text-lg font-bold text-teal-700 dark:text-teal-400 mb-2 leading-tight group-hover:text-teal-600 dark:group-hover:text-teal-300 transition-colors duration-200">
<a href="#" class="before:absolute before:inset-0 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded-md">Exploring the future of web development</a>
</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">What new technologies are you excited about? Discuss the potential impacts of AI, WebAssembly, and more!</p>
<div class="flex flex-wrap gap-2 mb-4 text-xs">
<span class="px-2 py-1 bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 rounded-full">#Tech</span>
<span class="px-2 py-1 bg-orange-100 dark:bg-orange-800 text-orange-800 dark:text-orange-200 rounded-full">#AI</span>
<span class="px-2 py-1 bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 rounded-full">#WebDev</span>
</div>
<div class="mt-auto flex items-center justify-between text-gray-500 dark:text-gray-400 text-sm">
<div class="flex items-center">
<svg class="w-4 h-4 mr-1 text-blue-500 dark:text-blue-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7s-8-3.134-8-7 3.582-7 8-7 8 3.134 8 7zM9 9a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg>
<span>15 Comments</span>
</div>
<div class="flex items-center">
<svg class="w-4 h-4 mr-1 text-red-500 dark:text-red-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a1 1 0 11-2 0V4a1 1 0 10-2 0v1a1 1 0 11-2 0V4zm-1 0a1 1 0 000 2h.01a1 1 0 000-2H6zm7 0a1 1 0 000 2h.01a1 1 0 000-2H13zM6 10a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm-1 5a1 1 0 000 2h2a1 1 0 000-2H5zm7 0a1 1 0 000 2h2a1 1 0 000-2h-2z" clip-rule="evenodd"></path></svg>
<span>6 Likes</span>
</div>
</div>
</div>
</article>
<!-- Card 2 -->
<article class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-xl transition-all duration-300 overflow-hidden
transform hover:-translate-y-1 hover:scale-[1.01] active:scale-[0.99]">
<div class="p-5 flex flex-col h-full">
<div class="flex items-center mb-3">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/17.jpg" alt="User Avatar">
<div>
<p class="text-sm font-semibold text-gray-700 dark:text-gray-200">Jane Smith</p>
<p class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</p>
</div>
</div>
<h3 class="text-lg font-bold text-teal-700 dark:text-teal-400 mb-2 leading-tight group-hover:text-teal-600 dark:group-hover:text-teal-300 transition-colors duration-200">
<a href="#" class="before:absolute before:inset-0 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded-md">Best practices for responsive design</a>
</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">Share your favorite tips and tricks for building truly responsive and accessible web experiences across all devices.</p>
<div class="flex flex-wrap gap-2 mb-4 text-xs">
<span class="px-2 py-1 bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 rounded-full">#Design</span>
<span class="px-2 py-1 bg-cyan-100 dark:bg-cyan-800 text-cyan-800 dark:text-cyan-200 rounded-full">#Frontend</span>
<span class="px-2 py-1 bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 rounded-full">#CSS</span>
</div>
<div class="mt-auto flex items-center justify-between text-gray-500 dark:text-gray-400 text-sm">
<div class="flex items-center">
<svg class="w-4 h-4 mr-1 text-blue-500 dark:text-blue-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7s-8-3.134-8-7 3.582-7 8-7 8 3.134 8 7zM9 9a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg>
<span>22 Comments</span>
</div>
<div class="flex items-center">
<svg class="w-4 h-4 mr-1 text-red-500 dark:text-red-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a1 1 0 11-2 0V4a1 1 0 10-2 0v1a1 1 0 11-2 0V4zm-1 0a1 1 0 000 2h.01a1 1 0 000-2H6zm7 0a1 1 0 000 2h.01a1 1 0 000-2H13zM6 10a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm-1 5a1 1 0 000 2h2a1 1 0 000-2H5zm7 0a1 1 0 000 2h2a1 1 0 000-2h-2z" clip-rule="evenodd"></path></svg>
<span>10 Likes</span>
</div>
</div>
</div>
</article>
<!-- Card 3 -->
<article class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-xl transition-all duration-300 overflow-hidden
transform hover:-translate-y-1 hover:scale-[1.01] active:scale-[0.99]">
<div class="p-5 flex flex-col h-full">
<div class="flex items-center mb-3">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/lego/7.jpg" alt="User Avatar">
<div>
<p class="text-sm font-semibold text-gray-700 dark:text-gray-200">RetroFan_99</p>
<p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
</div>
</div>
<h3 class="text-lg font-bold text-teal-700 dark:text-teal-400 mb-2 leading-tight group-hover:text-teal-600 dark:group-hover:text-teal-300 transition-colors duration-200">
<a href="#" class="before:absolute before:inset-0 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded-md">Nostalgia trip: Favorite 80s arcade games</a>
</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">Let's reminisce about the golden age of arcade gaming! What were your go-to machines and high scores?</p>
<div class="flex flex-wrap gap-2 mb-4 text-xs">
<span class="px-2 py-1 bg-yellow-100 dark:bg-yellow-800 text-yellow-800 dark:text-yellow-200 rounded-full">#Retro</span>
<span class="px-2 py-1 bg-orange-100 dark:bg-orange-800 text-orange-800 dark:text-orange-200 rounded-full">#Gaming</span>
<span class="px-2 py-1 bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-200 rounded-full">#80s</span>
</div>
<div class="mt-auto flex items-center justify-between text-gray-500 dark:text-gray-400 text-sm">
<div class="flex items-center">
<svg class="w-4 h-4 mr-1 text-blue-500 dark:text-blue-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7s-8-3.134-8-7 3.582-7 8-7 8 3.134 8 7zM9 9a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg>
<span>30 Comments</span>
</div>
<div class="flex items-center">
<svg class="w-4 h-4 mr-1 text-red-500 dark:text-red-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a1 1 0 11-2 0V4a1 1 0 10-2 0v1a1 1 0 11-2 0V4zm-1 0a1 1 0 000 2h.01a1 1 0 000-2H6zm7 0a1 1 0 000 2h.01a1 1 0 000-2H13zM6 10a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm-1 5a1 1 0 000 2h2a1 1 0 000-2H5zm7 0a1 1 0 000 2h2a1 1 0 000-2h-2z" clip-rule="evenodd"></path></svg>
<span>20 Likes</span>
</div>
</div>
</div>
</article>
<!-- Card 4 -->
<article class="relative group bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg dark:hover:shadow-xl transition-all duration-300 overflow-hidden
transform hover:-translate-y-1 hover:scale-[1.01] active:scale-[0.99]">
<div class="p-5 flex flex-col h-full">
<div class="flex items-center mb-3">
<img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/4.jpg" alt="User Avatar">
<div>
<p class="text-sm font-semibold text-gray-700 dark:text-gray-200">FoodExplorer</p>
<p class="text-xs text-gray-500 dark:text-gray-400">3 days ago</p>
</div>
</div>
<h3 class="text-lg font-bold text-teal-700 dark:text-teal-400 mb-2 leading-tight group-hover:text-teal-600 dark:group-hover:text-teal-300 transition-colors duration-200">
<a href="#" class="before:absolute before:inset-0 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800 rounded-md">Top 5 comfort food recipes for fall</a>
</h3>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4 line-clamp-3">Share your most beloved, heartwarming recipes that are perfect for chilly autumn evenings. </p>
<div class="flex flex-wrap gap-2 mb-4 text-xs">
<span class="px-2 py-1 bg-cyan-100 dark:bg-cyan-800 text-cyan-800 dark:text-cyan-200 rounded-full">#Food</span>
<span class="px-2 py-1 bg-green-100 dark:bg-green-800 text-green-800 dark:text-green-200 rounded-full">#Cooking</span>
<span class="px-2 py-1 bg-purple-100 dark:bg-purple-800 text-purple-800 dark:text-purple-200 rounded-full">#Recipes</span>
</div>
<div class="mt-auto flex items-center justify-between text-gray-500 dark:text-gray-400 text-sm">
<div class="flex items-center">
<svg class="w-4 h-4 mr-1 text-blue-500 dark:text-blue-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7s-8-3.134-8-7 3.582-7 8-7 8 3.134 8 7zM9 9a1 1 0 000 2h2a1 1 0 100-2H9z" clip-rule="evenodd"></path></svg>
<span>18 Comments</span>
</div>
<div class="flex items-center">
<svg class="w-4 h-4 mr-1 text-red-500 dark:text-red-400 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a1 1 0 11-2 0V4a1 1 0 10-2 0v1a1 1 0 11-2 0V4zm-1 0a1 1 0 000 2h.01a1 1 0 000-2H6zm7 0a1 1 0 000 2h.01a1 1 0 000-2H13zM6 10a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm-1 5a1 1 0 000 2h2a1 1 0 000-2H5zm7 0a1 1 0 000 2h2a1 1 0 000-2h-2z" clip-rule="evenodd"></path></svg>
<span>12 Likes</span>
</div>
</div>
</div>
</article>
</div>
</div>
</div>