Composant Infographie
Un composant d’infographie conçu avec skeuomorphism, avec des effets réactifs et la prise en charge des thèmes sombres, à l’aide de Tailwind CSS.
HTML Code
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-xl mx-auto">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Infographics Component</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
<img src="https://picsum.photos/200/100" alt="Placeholder Image" class="w-full h-auto rounded-md mb-2">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Section Title</h3>
<p class="text-gray-600 dark:text-gray-300">This is a description of this section. It mimics a real-world interface.</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-md">
<img src="https://picsum.photos/200/101" alt="Placeholder Image" class="w-full h-auto rounded-md mb-2">
<h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Another Section</h3>
<p class="text-gray-600 dark:text-gray-300">Details about this section are displayed here, using a real-world inspired design.</p>
</div>
</div>
<div class="flex items-center justify-between mt-6">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full">
<span class="ml-2 text-gray-800 dark:text-gray-200 font-medium">User Name</span>
</div>
<span class="text-gray-600 dark:text-gray-300">3 hours ago</span>
</div>
</div>Composants associés
Composant Infographie
Composant Infographie - Interface utilisateur en mode sombre avec niveaux de gris et conception complexe. Réactif avec prise en charge du thème sombre.
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
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.