Composant de conteneur
Un composant de conteneur réactif avec des micro-interactions qui présente des animations attrayantes réagissant aux actions de l’utilisateur, prend en charge le mode sombre et utilise Tailwind CSS.
HTML Code
<div class="max-w-4xl mx-auto p-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 ease-in-out transform hover:shadow-xl hover:scale-105">
<div class="flex items-center p-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600">
<div class="ml-4">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">Web Developer</p>
</div>
</div>
<img src="https://picsum.photos/800/400" alt="Placeholder Image" class="w-full h-48 object-cover transition-transform duration-500 hover:scale-105">
<div class="p-4">
<h3 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-2">Engaging Title</h3>
<p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-lg shadow-md hover:bg-blue-700 transition duration-200 ease-in-out">Learn More</button>
</div>
</div>
</div>Composants associés
Composant de conteneur
Un composant de conteneur conçu dans un style brutaliste pour le commerce électronique, avec une mise en page réactive avec prise en charge du thème sombre, utilisant Tailwind CSS.
Composant de récipient Glassmorphism
Un composant de conteneur Glassmorphism réactif avec une palette de couleurs triadique, conçu pour les portefeuilles. Prend en charge le mode sombre.
Neon_Glow_Food_Container
Un composant de conteneur simple et réactif pour les sites Web d’alimentation/restauration avec des effets de néon/lueur vibrants et la prise en charge du mode sombre.