CCHub Logo CCHub Tailwind Collection
Komponenten Infografiken Infografik-Komponente

Infografik-Komponente

Eine reaktionsschnelle Infografik-Komponente mit ansprechenden Mikrointeraktionen und Unterstützung für dunkle Themen mit Tailwind CSS.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 m-4 transition-all duration-300">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Engaging Infographics</h2>
  <div class="flex flex-col md:flex-row gap-4">
    <div class="bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
      <img src="https://picsum.photos/300/200?random=1" alt="Infographic Image" class="w-full">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Infographic 1</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of infographic 1.</p>
      </div>
    </div>
    <div class="bg-gray-200 dark:bg-gray-700 rounded-lg overflow-hidden shadow hover:shadow-lg transition-shadow duration-300 ease-in-out">
      <img src="https://picsum.photos/300/200?random=2" alt="Infographic Image" class="w-full">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-white">Infographic 2</h3>
        <p class="text-gray-600 dark:text-gray-300">Description of infographic 2.</p>
      </div>
    </div>
  </div>
  <div class="mt-4 flex items-center">
    <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
    <div class="ml-3">
      <h4 class="text-md font-semibold text-gray-800 dark:text-white">John Doe</h4>
      <span class="text-sm text-gray-500 dark:text-gray-400">Created: 2 hours ago</span>
    </div>
  </div>
</div>

Verwandte Komponenten

Neumorphe E-Commerce-Infografik-Komponente

Eine einfache, reaktionsschnelle neumorphe Infografik-Komponente für den E-Commerce, die ein analoges Farbschema verwendet und den Dunkelmodus unterstützt.

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

Infografik-Komponente

Eine einfache, reaktionsschnelle Infografik-Komponente für Kryptowährungs-/Blockchain-Anwendungen mit einer Benutzeroberfläche im Dunkelmodus und einer Wald-/Grün-Farbpalette. Zeigt wichtige Metriken wie Gesamttransaktionen, tägliches Volumen und aktive Benutzer an.

Offen