Forum_Community_Cards_Component
Un composant de cartes réactives et interactives pour un forum ou une plate-forme communautaire, avec une palette de couleurs rétro/vintage et des effets de survol subtils pour les micro-interactions. Inclut la prise en charge du mode sombre et du HTML sémantique.
HTML Code
<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>Composants associés
Composant de cartes neumorphes
Un composant de cartes réactives conçu dans le style Neumorphism avec prise en charge du thème sombre, avec des ombres subtiles et une mise en page flexible.
Retro_E_commerce_Cards_Component
Un composant de carte produit e-commerce réactif avec une esthétique rétro/vintage, des tons de terre et une prise en charge du mode sombre, adapté aux expériences d’achat en ligne. Les fonctionnalités incluent l’image du produit, le nom, le prix et un bouton d’appel à l’action.
Composant Cartes
Composant de cartes réactives avec micro-interactions et prise en charge du thème sombre.