Composant de conteneur
Un composant de conteneur réactif simple pour la consommation de blog/contenu avec des micro-interactions et la prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="container mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl">
<div class="flex flex-col items-center">
<img src="https://picsum.photos/400/200" alt="Blog Image" class="w-full h-48 object-cover rounded-md transition-transform duration-300 ease-in-out hover:scale-105">
<h2 class="mt-4 text-2xl font-semibold text-gray-800 dark:text-white transition-colors duration-300">Blog Title</h2>
<p class="mt-2 text-gray-600 dark:text-gray-400 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
<div class="ml-2">
<p class="text-gray-800 dark:text-white font-semibold">Author Name</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">Date Published</p>
</div>
</div>
</div>
</div>Composants associés
Composant de conteneur neumorphe
Un composant de conteneur Neumorphic réactif pour présenter des travaux ou des produits, conçu avec une palette de couleurs triadique et la prise en charge du thème sombre, à l’aide de Tailwind CSS.
Composant de conteneur 3D
Composant de conteneur réactif pour les tableaux de bord avec une palette de couleurs vives et des éléments de conception 3D, prenant en charge le mode sombre.
Composant de conteneur
Un conteneur de conception matérielle réactif pour le commerce électronique, avec des couleurs pastel, une prise en charge du mode sombre et des éléments interactifs complexes à l’aide de Tailwind CSS.