CCHub Logo CCHub Tailwind Collection
Komponenten Charts Charts-Komponente

Charts-Komponente

Eine einfache, reaktionsschnelle Diagrammkomponente mit Pastellfarben und Unterstützung für den Dunkelmodus, die für den Konsum von Blogs / Inhalten mit subtilen Mikrointeraktionen über Hover-Effekte entwickelt wurde. Kein JavaScript.

Vorschau

HTML-Code 

<div class="container mx-auto p-4">
  <div class="bg-white dark:bg-gray-800 shadow rounded-lg p-6">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Sales Overview</h2>
    <div class="flex flex-col space-y-4">
      <div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-blue-100 dark:bg-blue-700">
        <div class="text-sm font-medium text-blue-800 dark:text-blue-200">January</div>
        <div class="w-2/3 bg-blue-200 dark:bg-blue-600 rounded-full h-4">
          <div class="bg-blue-500 dark:bg-blue-400 h-4 rounded-full stunning-animation" style="width: 75%;"></div>
        </div>
        <div class="text-sm font-medium text-blue-800 dark:text-blue-200">75%</div>
      </div>
      <div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-green-100 dark:bg-green-700">
        <div class="text-sm font-medium text-green-800 dark:text-green-200">February</div>
        <div class="w-2/3 bg-green-200 dark:bg-green-600 rounded-full h-4">
          <div class="bg-green-500 dark:bg-green-400 h-4 rounded-full stunning-animation" style="width: 60%;"></div>
        </div>
        <div class="text-sm font-medium text-green-800 dark:text-green-200">60%</div>
      </div>
      <div class="flex items-center justify-between hover:scale-105 transition-transform duration-200 eas-in-out cursor-pointer p-2 rounded-md bg-purple-100 dark:bg-purple-700">
        <div class="text-sm font-medium text-purple-800 dark:text-purple-200">March</div>
        <div class="w-2/3 bg-purple-200 dark:bg-purple-600 rounded-full h-4">
          <div class="bg-purple-500 dark:bg-purple-400 h-4 rounded-full stunning-animation" style="width: 90%;"></div>
        </div>
        <div class="text-sm font-medium text-purple-800 dark:text-purple-200">90%</div>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Cyberpunk Chart Komponente - Regierung/Öffentlich

Eine mäßig komplexe Diagrammkomponente mit Cyberpunk-Ästhetik, die sich für Websites von Behörden und öffentlichen Diensten eignet. Mit dunklem Hintergrund, hellen Neon-Akzenten und einer Retro-/Vintage-Farbpalette. Reaktionsschnell und mit Unterstützung für den Dunkelmodus.

Offen

Industrial_Chart_Component_Ocean_Blue_Simple

Eine einfache, reaktionsschnelle Diagrammkomponente mit einer industriellen, rohstofforientierten Ästhetik in Ozean-/Blautönen, die für gemeinnützige/wohltätige Organisationen entwickelt wurde. Inklusive Unterstützung für den Dunkelmodus.

Offen

Charts-Komponente

Eine reaktionsschnelle Charts-Komponente, die nach den Prinzipien des Materialdesigns entwickelt wurde und ein pastellfarbenes Farbschema und komplexe Interaktivität für die Präsentation von Portfolios bietet. Es enthält Unterstützung für den Dunkelmodus mit Tailwind-CSS-Klassen.

Offen