Composant Infographie
Un composant d’infographie simple et réactif avec des éléments de conception 3D et une palette de couleurs analogue pour l’utilisation d’un blog/contenu. Il inclut la prise en charge des thèmes sombres à l’aide de Tailwind CSS.
HTML Code
<div class="container mx-auto p-6 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<div class="relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-pink-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
<div class="relative z-10">
<h2 class="text-2xl font-bold mb-4">Key Statistic 1</h2>
<p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-green-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
<div class="relative z-10">
<h2 class="text-2xl font-bold mb-4">Key Statistic 2</h2>
<p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<div class="mt-8 relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
<div class="absolute inset-0 bg-gradient-to-br from-yellow-400 to-red-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
<div class="relative z-10">
<h2 class="text-2xl font-bold mb-4">Key Finding</h2>
<p class="text-gray-700 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div>
</div>
</div>Composants associés
Composant Infographie
Composant d’infographie complexe avec conception Neumorphism, schéma de couleurs complémentaire, prise en charge du mode réactif et sombre, pour les entreprises/entreprises, à l’aide de Tailwind CSS.
3D_Grayscale_Infographics_Component
Un composant d’infographie en niveaux de gris réactif, inspiré de la 3D, pour la consommation de blogs/contenus, avec de la profondeur et de l’engagement. Inclut la prise en charge du mode sombre.
Composant Infographie
Un composant d’infographie complexe et réactif pour les sites Web d’entreprise, conçu avec un style Skeuomorphism et une palette de couleurs vives à l’aide de Tailwind CSS. Comprend la prise en charge du mode sombre et des éléments interactifs.