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.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md mx-auto">
<h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-gray-200">Infographics</h2>
<div class="mt-4 flex flex-col items-center">
<div class="bg-blue-200 dark:bg-blue-700 rounded-full w-24 h-24 flex items-center justify-center shadow-inner">
<img src="https://picsum.photos/100/100" alt="Random Image" class="rounded-full object-cover">
</div>
<p class="mt-2 text-lg text-gray-700 dark:text-gray-300">Engaging 3D Design</p>
</div>
<div class="mt-4 flex justify-between">
<div class="bg-green-200 dark:bg-green-700 rounded-lg p-4 shadow-md w-1/4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Stat 1</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Details about Stat 1</p>
</div>
<div class="bg-yellow-200 dark:bg-yellow-700 rounded-lg p-4 shadow-md w-1/4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Stat 2</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Details about Stat 2</p>
</div>
<div class="bg-pink-200 dark:bg-pink-700 rounded-lg p-4 shadow-md w-1/4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Stat 3</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Details about Stat 3</p>
</div>
</div>
<div class="mt-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">User Info</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">
<p class="ml-2 text-gray-700 dark:text-gray-300">John Doe</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.
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.
Composant Infographie
Un composant infographique neumorphe avec des tons de terre inspirés du sol, des arbres et des paysages. Il présente un style d’interface utilisateur souple avec une complexité modérée pour une utilisation professionnelle/d’entreprise. Le design est réactif et prend en charge les thèmes sombres à l’aide de Tailwind CSS.