Composant Composants d’affichage de contenu
Un composant d’affichage de contenu avec des microinteractions, une conception réactive et la prise en charge du thème sombre à l’aide de Tailwind CSS. Propose des effets de survol subtils et des animations de concentration sur des éléments interactifs.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8">
<div class="max-w-sm mx-auto rounded-lg shadow-lg bg-white dark:bg-gray-800 overflow-hidden">
<img class="w-full h-48 object-cover transform transition duration-500 hover:scale-105" src="https://picsum.photos/600/400" alt="Placeholder image">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2 transform transition duration-500 hover:text-indigo-600 dark:hover:text-indigo-400">Component Title</h2>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4 transform transition duration-500 hover:translate-x-1">This is a description of the content. It is responsive and supports dark theme.</p>
<div class="flex items-center justify-between">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4 transform transition duration-500 hover:rotate-6" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of the author">
<div class="text-sm">
<p class="text-gray-900 dark:text-white leading-none transform transition duration-500 hover:underline">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">7 min read</p>
</div>
</div>
<button class="px-3 py-1 bg-indigo-500 text-white text-xs font-bold rounded hover:bg-indigo-600 dark:bg-indigo-700 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-opacity-50 transform transition duration-500 hover:-translate-y-1">Read More</button>
</div>
</div>
</div>
</div>Composants associés
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.
Composants d’affichage du contenu
Un composant d’affichage de contenu réactif pour les médias sociaux conçu dans un style skeuomorphe avec des couleurs pastel, avec plusieurs éléments interactifs et la prise en charge du mode sombre.
Composant d’affichage du contenu
Un composant de style glassmorphism pour l’affichage du contenu du portefeuille avec des éléments interactifs, prenant en charge le mode sombre.