Composant Infographie
Un composant d’infographie minimaliste avec des espaces propres et des éléments minimaux, la prise en charge du design réactif et du thème sombre.
HTML Code
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Infographics Title</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
<img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description for statistic 1</p>
</div>
<div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
<img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description for statistic 2</p>
</div>
<div class="flex flex-col items-center justify-center border p-4 rounded-lg transition ease-in-out duration-300 hover:shadow-lg">
<img src="https://picsum.photos/200" alt="Infographic Image" class="w-full h-32 object-cover rounded-md mb-2">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Statistic 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description for statistic 3</p>
</div>
</div>
<div class="mt-6 border-t pt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">Additional Insights</h3>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<p class="text-gray-600 dark:text-gray-400">This is an additional insight provided by User</p>
</div>
</div>
</div>Composants associés
Composant Infographie
Un composant infographique simple conçu avec le style Neumorphism et une palette de couleurs pastel. Il affiche une carte de profil et des statistiques de base dans une mise en page visuellement attrayante adaptée aux sites Web d’entreprise ou d’entreprise.
RetroInfographicsComposant
Un composant d’infographie réactif avec un design rétro/vintage, une palette de couleurs pastel et une prise en charge du mode sombre. Utilise Tailwind CSS pour le style et comprend plusieurs éléments interactifs pour une interface complexe adaptée aux blogs et à la consommation de contenu. Comprend une chronologie, des barres de progression, des graphiques et un appel à l’action, le tout avec une esthétique des années 80/90 et des couleurs pastel. Utilise des images aléatoires de picsum.photos et randomuser.me pour les avatars.
Composant Infographie
Infographie Composant pour portfolio - Material Design, Palette de couleurs analogue, Complexité modérée, Réactif, Prise en charge du thème sombre