CCHub Logo CCHub Tailwind Collection
Komponenten Infografiken Infografik-Komponente

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.

Vorschau

HTML-Code 

<div class="container mx-auto p-6 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100">
  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
    <div class="relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <div class="absolute inset-0 bg-gradient-to-br from-purple-400 to-pink-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
      <div class="relative z-10">
        <h2 class="text-2xl font-bold mb-4">Key Statistic 1</h2>
        <p class="text-gray-700 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </div>

    <div class="relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-green-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
      <div class="relative z-10">
        <h2 class="text-2xl font-bold mb-4">Key Statistic 2</h2>
        <p class="text-gray-700 dark:text-gray-300">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
      </div>
    </div>
  </div>

  <div class="mt-8 relative bg-white dark:bg-gray-700 rounded-lg shadow-lg p-6 transform transition duration-500 hover:scale-105">
    <div class="absolute inset-0 bg-gradient-to-br from-yellow-400 to-red-500 opacity-75 rounded-lg" style="transform: translateZ(-20px);"></div>
    <div class="relative z-10">
      <h2 class="text-2xl font-bold mb-4">Key Finding</h2>
      <p class="text-gray-700 dark:text-gray-300">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
    </div>
  </div>
</div>

Verwandte Komponenten

Infografik-Komponente

Eine reaktionsschnelle Infografik-Komponente mit 3D-Designelementen, pastellfarbenem Farbschema und moderater Komplexität für Dashboards mit Unterstützung für den Dunkelmodus. Kein JavaScript, nur HTML mit Tailwind CSS.

Offen

Infografik-Komponente

Infografik-Komponente im Brutalismus-Stil, hoher Kontrast, ungewöhnliches Layout, reaktionsschnell mit Unterstützung des Dunkelmodus mit Rückenwind-CSS

Offen

Infografik-Komponente

Eine neumorphe Infografik-Komponente mit Erdtönen, die von Erde, Bäumen und Landschaften inspiriert sind. Es verfügt über einen weichen UI-Stil mit moderater Komplexität für den Business-/Corporate-Gebrauch. Das Design ist responsive und unterstützt dunkle Designs mit Tailwind CSS.

Offen