CCHub Logo CCHub Tailwind Collection
Komponenten Infografiken Infografik-Komponente

Infografik-Komponente

Eine reaktionsschnelle Infografik-Komponente, die in einem skeuomorphen Stil unter Verwendung von Tailwind CSS mit Unterstützung für dunkle Themen entworfen wurde. Es ahmt reale Elemente nach, um Informationen visuell darzustellen.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 mb-6 w-full max-w-4xl">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Infographics</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-xl transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/id/1011/400/300" alt="Infographic 1" class="w-full h-32 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Metric 1</h3>
        <p class="text-gray-600 dark:text-gray-400">Description and details about the first metric displayed in a visually appealing way.</p>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-xl transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/id/1012/400/300" alt="Infographic 2" class="w-full h-32 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Metric 2</h3>
        <p class="text-gray-600 dark:text-gray-400">Description and details about the second metric, designed to be intuitive.</p>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-xl transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/id/1013/400/300" alt="Infographic 3" class="w-full h-32 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Metric 3</h3>
        <p class="text-gray-600 dark:text-gray-400">Insights and information about the third metric, presented in an engaging manner.</p>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-xl transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/id/1014/400/300" alt="Infographic 4" class="w-full h-32 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Metric 4</h3>
        <p class="text-gray-600 dark:text-gray-400">Detailed information about the fourth metric, with a visual twist.</p>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Skeuomorphe Dating-Infografik

Eine komplexe, reaktionsschnelle Infografik-Komponente, die für Dating-/Social-Media-Plattformen mit einem skeuomorphen Stil und einem sepia/braunen Farbschema entwickelt wurde, mit mehreren interaktiven Elementen und Unterstützung für den Dunkelmodus.

Offen

Infografik-Komponente

Eine einfache, reaktionsschnelle Infografik-Komponente mit 3D-Designelementen und einem analogen Farbschema für die Verwendung von Blogs / Inhalten. Es enthält Unterstützung für dunkle Themen mit Tailwind CSS.

Offen

Memphis_Muted_Infographics_Component_Government

Eine Infografik-Komponente für Behörden/öffentliche Dienste, inspiriert vom Memphis-Design mit einem gedämpften/entsättigten Farbschema. Mit auffälligen Geometrien, verspielten Mustern und einem reaktionsschnellen Layout mit Unterstützung für den Dunkelmodus. Zeigt wichtige Statistiken und Informationen visuell an.

Offen