CCHub Logo CCHub Tailwind Collection
Komponenten Armaturenbretter Dashboards-Komponente

Dashboards-Komponente

Dashboards-Komponente mit Neumorphism-Design, responsiven Effekten und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<section class="p-8 dark:bg-gray-900 dark:text-white">
  <div class="container mx-auto">
    <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">

      <!-- Card 1 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Sales Overview</h3>
        <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>

      <!-- Card 2 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Revenue Analysis</h3>
        <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>

      <!-- Card 3 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Customer Growth</h3>
        <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>

      <!-- Card 4 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Marketing Performance</h3>
        <p class="text-gray-700 dark:text-gray-300">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>

      <!-- Card 5 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Inventory Status</h3>
        <p class="text-gray-700 dark:text-gray-300">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
      </div>

      <!-- Card 6 -->
      <div class="rounded-xl bg-gray-200 p-6 shadow-xl dark:bg-gray-800">
        <h3 class="mb-4 text-xl font-semibold">Website Traffic</h3>
        <p class="text-gray-700 dark:text-gray-300">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.</p>
      </div>

    </div>
  </div>
</section>

Verwandte Komponenten

Brutalistische Graustufen-Dashboard-Komponente

Ein einfaches, brutalistisches Graustufen-Dashboard-Layout für Geschäfts-/Unternehmenswebsites, reaktionsschnell mit Unterstützung für den Dunkelmodus, erstellt mit Tailwind CSS.

Offen

Dashboard_Weather_Climate_Swiss

Eine komplexe, reaktionsschnelle Wetter- und Klima-Dashboard-Komponente, die von der schweizerischen/internationalen Typografie inspiriert ist, Erdtöne verwendet und den Dunkelmodus unterstützt. Verfügt über mehrere Datenpunkte wie aktuelles Wetter, Vorhersage, Luftqualität und Klimatrends.

Offen

Memphis Sepia Dashboard

Eine Dashboard-Komponente mit der Ästhetik von Memphis Design, mit kühnen geometrischen Formen und einer warmen Sepia-/Braun-Farbpalette, die sich für Geschäfts- und Unternehmenswebsites eignet. Inklusive vollständiger Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Offen