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
Carte de contenu de conception matérielle pour l’éducation
Une carte de contenu simple et réactive conçue avec les principes de conception matérielle, la palette de couleurs bleues de l’entreprise et la prise en charge du mode sombre, adaptée aux plateformes éducatives.
Composant d’affichage du contenu
Un composant réactif pour présenter des travaux ou des produits dans un style sombre avec une palette de couleurs pastel.
Composants d’affichage de contenu Composant 11
Un composant d’affichage de contenu de style rétro/vintage présentant des designs nostalgiques des années 80/90, avec des effets réactifs et une prise en charge du thème sombre.