Forum_Community_Cards_Component
Un componente di carte reattivo e interattivo per un forum o una piattaforma di community, con una combinazione di colori retrò/vintage e sottili effetti al passaggio del mouse per le microinterazioni. Include il supporto per la modalità oscura e l'HTML semantico.
Codice 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>Componenti correlati
Luxury_Portfolio_Cards_Ocean_Blue
Un complesso componente di carte portfolio di lusso/premium progettato con toni oceano/blu per mostrare lavori o prodotti. Presenta un design reattivo, una tipografia sofisticata, immagini eleganti e il supporto completo della modalità oscura.
Componente Schede 3D
Un componente di scheda reattivo con uno stile di progettazione 3D, colori vivaci e più elementi interattivi, adatto per una dashboard. Supporta la modalità oscura utilizzando il prefisso scuro di Tailwind.
Componente Schede
Un componente di carte complesso progettato per la modalità scura, adatto per il consumo di blog e contenuti con una combinazione di colori triadica.