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
Industrial_3D_Content_Display
Un composant d’affichage de contenu simple et réactif pour les entreprises manufacturières/industrielles, avec une conception 3D subtile utilisant des couleurs sourdes et la prise en charge du mode sombre.
Composant d’affichage de contenu Art Déco
Un composant d’affichage de contenu complexe et réactif inspiré de l’Art déco pour les sites Web d’entreprise, avec des motifs géométriques, des tons de bijoux riches et la prise en charge du mode sombre. Comprend plusieurs sections pour des articles, des témoignages et des appels à l’action.
Composants d’affichage du contenu
Un composant simple d’affichage de contenu réactif de style vintage pour le commerce électronique, utilisant une palette de couleurs monochromatiques et prenant en charge le mode sombre.