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
Carte postale rétro pour les médias sociaux
Un composant de carte postale réactif pour les réseaux sociaux avec une esthétique rétro/vintage des années 80/90, utilisant une palette de couleurs analogue (ciel, sarcelle, violet) avec des accents fuchsia. Dispose d’une prise en charge du mode sombre et d’effets de survol interactifs. Le contenu comprend l’avatar de l’utilisateur, le nom d’utilisateur, l’horodatage, la publication de texte, l’image et les boutons d’action (like, comment, share). Construit avec Tailwind CSS.
Affichage du contenu de la photographie ludique aux tons de bijoux
Un composant d’affichage de contenu complexe, ludique et amusant pour un portfolio ou une galerie de photographies, avec des tons de bijoux vifs, des éléments arrondis et un design réactif avec prise en charge du mode sombre. Il présente plusieurs éléments interactifs tels que des images en vedette, des mises en page de grille et des sections de profil.
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.