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
Un composant d’infographie réactif conçu dans un style skeuomorphe à l’aide de Tailwind CSS avec prise en charge du thème sombre. Il imite des éléments du monde réel pour afficher visuellement les informations.
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 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.