Composant Infographie
Un composant d’infographie réactif avec des micro-interactions attrayantes et une prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 m-4 transition-all duration-300">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Engaging Infographics</h2>
<div class="flex flex-col md:flex-row gap-4">
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/300/200?random=1" alt="Infographic Image" class="w-full">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Infographic 1</h3>
<p class="text-gray-600 dark:text-gray-300">Description of infographic 1.</p>
</div>
</div>
<div class="bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/300/200?random=2" alt="Infographic Image" class="w-full">
<div class="p-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Infographic 2</h3>
<p class="text-gray-600 dark:text-gray-300">Description of infographic 2.</p>
</div>
</div>
</div>
<div class="mt-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
<div class="ml-3">
<h4 class="text-md font-semibold text-gray-800 dark:text-white">John Doe</h4>
<span class="text-sm text-gray-500 dark:text-gray-400">Created: 2 hours ago</span>
</div>
</div>
</div>Composants associés
Composant Infographie
Composant d’infographie avec style brutalisme, contraste élevé, mise en page inhabituelle, réactif avec prise en charge du mode sombre à l’aide de tailwind css
Composant Infographie
Un composant d’infographie 3D réactif conçu pour les interfaces de médias sociaux avec des couleurs vives et une prise en charge des thèmes sombres, incorporant des éléments tridimensionnels pour plus de profondeur et d’engagement.
Composant Infographie
Un composant d’infographie simple conçu avec une esthétique 3D, utilisant des couleurs pastel pour les interfaces de médias sociaux, avec prise en charge du mode sombre.