Composants Infographies Composant Infographie

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.

Aperçu

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 d’infographie vintage rétro

Un composant de tableau de bord d’infographie de médias sociaux réactif, de couleur pastel, de style rétro/vintage, construit avec Tailwind CSS, avec des statistiques de profil utilisateur, un graphique à barres de hashtag tendance et une image illustrative. Inclut la prise en charge du mode sombre via le préfixe dark : de Tailwind et des animations de survol interactives (aucun JavaScript requis).

Ouvrir