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

Luxus-Landwirtschafts-Dashboard-Komponente

Eine elegante und anspruchsvolle Dashboard-Komponente für Landwirtschafts- und Landwirtschafts-Websites mit einem Schwarz-Weiß-Farbschema mit einem lebendigen smaragdgrünen Akzent. Es enthält wichtige Metriken, aktuelle Aktivitäten und interaktive Elemente, die so konzipiert sind, dass sie vollständig reaktionsschnell sind und den Dunkelmodus unterstützen.

Offen

Dashboards-Komponente

Eine einfache und reaktionsschnelle Dashboard-Komponente, die für die Präsentation von Portfolios entwickelt wurde, mit Mikrointeraktionen und Fokus auf Erdtöne. Es unterstützt dunkles Theme mit Tailwind CSS.

Offen

Dashboards-Komponente

Eine minimalistische Dashboard-Komponente, die ein flaches Design mit responsiven Effekten und Unterstützung für dunkle Themen präsentiert und mit Tailwind CSS erstellt wurde.

Offen