Composants Composants d’affichage du contenu Carte de tableau de bord triadique de conception matérielle

Carte de tableau de bord triadique de conception matérielle

Un composant d’affichage de contenu de tableau de bord simple et réactif avec l’esthétique du Material Design, utilisant une palette de couleurs triadique et la prise en charge du mode sombre. Convient pour afficher des mesures ou des informations clés.

Aperçu

HTML Code

<div class="p-4 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">

    <!-- Metric Card 1 (Red/Pinkish) -->
    <div class="col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden relative group">
      <div class="relative p-6 pt-16">
        <div class="absolute top-0 left-0 right-0 h-16 bg-red-500 dark:bg-red-700 rounded-t-lg"></div>
        <div class="relative z-10 -mt-10 mb-4 mx-auto w-20 h-20 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center shadow-md border-4 border-red-200 dark:border-red-800">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-red-600 dark:text-red-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L19.5 7.5M9.75 17V10" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 16.5A.5.5 0 1013.5 15.5A.5.5 0 0013.5 16.5M17.5 12.5A.5.5 0 1017.5 11.5A.5.5 0 0017.5 12.5" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white text-center">Total Sales</h3>
        <p class="text-4xl font-extrabold text-red-600 dark:text-red-400 text-center mb-4">$12,345</p>
        <p class="text-sm text-gray-600 dark:text-gray-400 text-center">+5% from last month</p>
      </div>
      <div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-center">
        <a href="#" class="text-red-600 dark:text-red-400 font-medium hover:underline text-sm">View Details</a>
      </div>
      <div class="absolute inset-0 bg-red-100 dark:bg-red-900 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
    </div>

    <!-- Metric Card 2 (Blue/Cyan) -->
    <div class="col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden relative group">
      <div class="relative p-6 pt-16">
        <div class="absolute top-0 left-0 right-0 h-16 bg-blue-500 dark:bg-blue-700 rounded-t-lg"></div>
        <div class="relative z-10 -mt-10 mb-4 mx-auto w-20 h-20 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center shadow-md border-4 border-blue-200 dark:border-blue-800">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-600 dark:text-blue-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5.121 17.892A13.914 13.914 0 0112 16c2.582 0 5.121.75 7.029 2.019M12 15a4 4 0 100-8 4 4 0 000 8z" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white text-center">New Users</h3>
        <p class="text-4xl font-extrabold text-blue-600 dark:text-blue-400 text-center mb-4">789</p>
        <p class="text-sm text-gray-600 dark:text-gray-400 text-center">+15% week over week</p>
      </div>
      <div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-center">
        <a href="#" class="text-blue-600 dark:text-blue-400 font-medium hover:underline text-sm">User Analytics</a>
      </div>
      <div class="absolute inset-0 bg-blue-100 dark:bg-blue-900 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
    </div>

    <!-- Metric Card 3 (Green/Lime) -->
    <div class="col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden relative group">
      <div class="relative p-6 pt-16">
        <div class="absolute top-0 left-0 right-0 h-16 bg-green-500 dark:bg-green-700 rounded-t-lg"></div>
        <div class="relative z-10 -mt-10 mb-4 mx-auto w-20 h-20 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center shadow-md border-4 border-green-200 dark:border-green-800">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-green-600 dark:text-green-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M7 12l3-3m0 0l3 3m-3-3v8m0-13a9 9 0 110 18A9 9 0 0112 3z" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white text-center">Bounce Rate</h3>
        <p class="text-4xl font-extrabold text-green-600 dark:text-green-400 text-center mb-4">3.7<span class="text-xl">%</span></p>
        <p class="text-sm text-gray-600 dark:text-gray-400 text-center">-0.5% from previous period</p>
      </div>
      <div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-center">
        <a href="#" class="text-green-600 dark:text-green-400 font-medium hover:underline text-sm">View Report</a>
      </div>
      <div class="absolute inset-0 bg-green-100 dark:bg-green-900 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
    </div>

  </div>
</div>

Composants associés

Composant d’affichage du contenu

Composant d’affichage de contenu de style 3D présentant des travaux ou des produits de portefeuille avec une palette de couleurs en niveaux de gris et une conception réactive incluant la prise en charge du mode sombre.

Ouvrir

Carte postale rétro pour les médias sociaux

Un composant de carte postale réactif pour les réseaux sociaux avec une esthétique rétro/vintage des années 80/90, utilisant une palette de couleurs analogue (ciel, sarcelle, violet) avec des accents fuchsia. Dispose d’une prise en charge du mode sombre et d’effets de survol interactifs. Le contenu comprend l’avatar de l’utilisateur, le nom d’utilisateur, l’horodatage, la publication de texte, l’image et les boutons d’action (like, comment, share). Construit avec Tailwind CSS.

Ouvrir

Composants d’affichage du contenu

Un composant d’affichage de contenu réactif pour les médias sociaux conçu dans un style skeuomorphe avec des couleurs pastel, avec plusieurs éléments interactifs et la prise en charge du mode sombre.

Ouvrir