Composant d’affichage du contenu
Un composant d’affichage de contenu réactif qui intègre des micro-interactions avec des animations attrayantes axées sur les actions de l’utilisateur. Il inclut la prise en charge du mode sombre et des espaces réservés pour les images et les avatars.
HTML Code
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="flex items-center p-4 border-b border-gray-200 dark:border-gray-700">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
<div class="ml-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-300">John Doe</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">Software Engineer</p>
</div>
</div>
<div class="p-4">
<img src="https://picsum.photos/400/200" alt="Placeholder Image" class="w-full rounded-lg hover:scale-105 transition-transform duration-300">
<p class="mt-2 text-gray-700 dark:text-gray-300">This is a brief description of the content. It engages the user with interesting information and encourages interaction.</p>
<a href="#" class="inline-block mt-4 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-300">Read More</a>
</div>
</div>Composants associés
Pastel3DBlogContentCard
Un composant d’affichage de contenu réactif pour les blogs ou les sections de contenu, conçu avec Tailwind CSS. Il présente une mise en page simple avec une esthétique inspirée de la 3D utilisant des ombres et des effets de survol. La palette de couleurs est un pastel doux pour le mode clair, avec un thème compatible avec le mode sombre. Le composant comprend une image, un titre, des métadonnées (auteur/date), un extrait et un bouton « Lire la suite ». Les images fictives sont utilisées à partir de picsum.photos et randomuser.me.
Composant Composants d’affichage de contenu
Composant d’affichage de contenu Glassmorphism avec tons de terre
Composants d’affichage du contenu
Un portfolio de conception 3D présentant des travaux ou des produits avec une palette de couleurs en niveaux de gris et un design réactif, prenant en charge le mode sombre.