Composant Composants d’affichage de contenu
Un composant d’affichage de contenu simple et dynamique avec des micro-interactions, un design réactif et une prise en charge du thème sombre, adapté aux blogs et à la consommation de contenu. Utilise picsum.photos pour les images et randomuser.me pour les avatars.
HTML Code
<div class="min-h-screen bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-black p-4 flex items-center justify-center">
<div class="max-w-md w-full bg-white dark:bg-gray-700 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-purple-500/50 dark:hover:shadow-red-500/50">
<div class="relative">
<img class="w-full h-48 object-cover transition-opacity duration-300 hover:opacity-80" src="https://picsum.photos/600/400?random=1" alt="Article Thumbnail">
<div class="absolute bottom-0 left-0 bg-black bg-opacity-50 dark:bg-opacity-70 text-white px-3 py-1 rounded-tr-lg text-sm font-semibold">
Article
</div>
</div>
<div class="p-5">
<h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 transition-colors duration-300 hover:text-purple-700 dark:hover:text-red-400">
The Future of Web Development
</h3>
<p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed">
Explore the exciting new trends and technologies shaping the web, from AI-powered tools to immersive user experiences.
</p>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full object-cover border-2 border-purple-500 dark:border-red-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
<div>
<p class="text-gray-800 dark:text-white font-semibold text-sm">John Doe</p>
<p class="text-gray-500 dark:text-gray-400 text-xs">2 hours ago</p>
</div>
</div>
<a href="#" class="text-purple-600 dark:text-red-400 hover:text-purple-800 dark:hover:text-red-600 transition-colors duration-300 font-medium text-sm flex items-center group">
Read More
<svg class="ml-1 w-4 h-4 transform transition-transform duration-300 group-hover:translate-x-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="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
</a>
</div>
</div>
</div>
</div>Composants associés
Composant d’affichage du contenu
Un composant d’affichage de contenu réactif avec un style de design minimaliste et plat, idéal pour les blogs et la consommation de contenu. Il a une palette de couleurs en niveaux de gris et est équipé d’éléments interactifs tout en prenant en charge le mode sombre.
Composant d’affichage du contenu
Un composant d’affichage nostalgique au design rétro, avec des effets réactifs et une prise en charge du thème sombre.
Carte de tableau de bord triadique de conception matérielle
Un composant d’affichage de contenu de tableau de bord simple et réactif avec l’esthétique du Material Design, utilisant une palette de couleurs triadique et la prise en charge du mode sombre. Convient pour afficher des mesures ou des informations clés.