CCHub Logo CCHub Tailwind Collection
Komponenten Spalten Spalten-Komponente

Spalten-Komponente

Spaltenkomponente für ein Dashboard mit einem 3D-Design mit Komplementärfarben. Es enthält drei reaktionsschnelle Spalten mit einem einfachen Layout, Unterstützung für den Dunkelmodus und verwendet Tailwind CSS für das Styling. Es ist kein JavaScript enthalten.

Vorschau

HTML-Code 

<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
  <div class="container mx-auto grid gap-8 md:grid-cols-3">

    <!-- Column 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-300 relative" style="transform-style: preserve-3d;">
      <div class="absolute inset-0 bg-gradient-to-br from-blue-400 to-indigo-500 rounded-lg opacity-60" style="transform: translateZ(-1px);"></div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 relative z-10">Sales Overview</h3>
      <p class="text-gray-600 dark:text-gray-300 relative z-10">Visualize your sales performance with key metrics.</p>
      <div class="mt-4 relative z-10">
        <div class="h-40 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-400">Chart Placeholder</p>
        </div>
      </div>
    </div>

    <!-- Column 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-300 relative" style="transform-style: preserve-3d;">
      <div class="absolute inset-0 bg-gradient-to-br from-red-400 to-pink-500 rounded-lg opacity-60" style="transform: translateZ(-1px);"></div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 relative z-10">Customer Insights</h3>
      <p class="text-gray-600 dark:text-gray-300 relative z-10">Understand your customer base and their behavior.</p>
      <div class="mt-4 relative z-10">
        <div class="h-40 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-400">Graph Placeholder</p>
        </div>
      </div>
    </div>

    <!-- Column 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform hover:scale-105 transition-transform duration-300 relative" style="transform-style: preserve-3d;">
      <div class="absolute inset-0 bg-gradient-to-br from-green-400 to-teal-500 rounded-lg opacity-60" style="transform: translateZ(-1px);"></div>
      <h3 class="text-xl font-bold text-gray-800 dark:text-white mb-4 relative z-10">Product Performance</h3>
      <p class="text-gray-600 dark:text-gray-300 relative z-10">Monitor the performance of your products.</p>
      <div class="mt-4 relative z-10">
        <div class="h-40 bg-gray-200 dark:bg-gray-700 rounded-md flex items-center justify-center">
          <p class="text-gray-400">Data Placeholder</p>
        </div>
      </div>
    </div>

  </div>
</div>

Verwandte Komponenten

Spalten-Komponente

Responsive Columns-Komponente mit Glassmorphism-Stil, triadischem Farbschema, einfacher Komplexitätsstufe für Business-/Corporate-Zwecke, einschließlich Unterstützung des Dunkelmodus.

Offen

Playful_Documentation_Columns_Component

Eine verspielte und farbenfrohe Dokumentations-/Wiki-Spaltenkomponente mit Sonnenuntergangs-/Warmtönen, abgerundeten Elementen und Unterstützung für den Dunkelmodus. Entwickelt für Reaktionsfähigkeit auf allen Geräten.

Offen

Brutalism_Portfolio_Columns_Component

Eine vom Brutalismus inspirierte mehrspaltige Portfoliokomponente mit gedämpften Farben, großer Typografie, kontrastreichen Rändern und asymmetrischen Layouts. Enthält Unterstützung für den Dunkelmodus und präsentiert Projekte mit Titeln, Beschreibungen und Bildern.

Offen