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
Conteneur skeuomorphe
Un composant de conteneur réactif avec une conception Skeuomorphism et une prise en charge du mode sombre à l’aide de Tailwind CSS.
Composant de conteneur
Un composant de conteneur minimaliste pour un tableau de bord utilisant Tailwind CSS avec prise en charge du mode sombre.
Composant du conteneur 30
Un composant de conteneur de conception 3D réactif qui intègre des éléments tridimensionnels pour plus de profondeur et d’engagement avec la prise en charge du thème sombre.