Composant Infographie
Un composant d’infographie réactif avec de petites animations attrayantes qui répondent aux actions de l’utilisateur avec la prise en charge du thème sombre, créé à l’aide de Tailwind CSS.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 overflow-hidden transition-all transform hover:scale-105">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Infographics</h2>
<div class="flex flex-wrap">
<div class="w-full md:w-1/3 flex items-center mb-4">
<img src="https://picsum.photos/200/300" alt="Placeholder Image" class="w-20 h-20 rounded-full shadow-lg mr-4">
<div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Engagement</h3>
<p class="text-gray-600 dark:text-gray-400">50%</p>
</div>
</div>
<div class="w-full md:w-1/3 flex items-center mb-4">
<img src="https://picsum.photos/200/300?random=1" alt="Placeholder Image" class="w-20 h-20 rounded-full shadow-lg mr-4">
<div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Retention</h3>
<p class="text-gray-600 dark:text-gray-400">70%</p>
</div>
</div>
<div class="w-full md:w-1/3 flex items-center mb-4">
<img src="https://picsum.photos/200/300?random=2" alt="Placeholder Image" class="w-20 h-20 rounded-full shadow-lg mr-4">
<div>
<h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Conversion</h3>
<p class="text-gray-600 dark:text-gray-400">30%</p>
</div>
</div>
</div>
<div class="mt-6">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Profiles</h3>
<div class="flex flex-wrap">
<div class="w-1/2 md:w-1/4 flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow">
<p class="ml-2 text-gray-600 dark:text-gray-400">John Doe</p>
</div>
<div class="w-1/2 md:w-1/4 flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow">
<p class="ml-2 text-gray-600 dark:text-gray-400">Jane Smith</p>
</div>
<div class="w-1/2 md:w-1/4 flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow">
<p class="ml-2 text-gray-600 dark:text-gray-400">Mike Johnson</p>
</div>
<div class="w-1/2 md:w-1/4 flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full shadow">
<p class="ml-2 text-gray-600 dark:text-gray-400">Emily Davis</p>
</div>
</div>
</div>
</div>Composants associés
Infographie sur les rencontres skeuomorphes
Un composant infographique complexe et réactif conçu pour les plateformes de rencontres/sociales avec un style skeuomorphe et une palette de couleurs sépia/marron, avec plusieurs éléments interactifs et la prise en charge du mode sombre.
Composant Infographie
Composant d’infographie réactif avec un design rétro/vintage, une palette de couleurs monochromatiques et une prise en charge du thème sombre pour les sites Web d’entreprise.
Composant Infographie
Un composant infographique complexe avec un style de conception Skeuomorphism et une palette de couleurs vives, adapté aux plateformes de commerce électronique. Il est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS. Il affiche diverses statistiques de produits avec des éléments interactifs.