CCHub Logo CCHub Tailwind Collection
Komponenten Spalten Spalten-Komponente

Spalten-Komponente

Eine einfache, reaktionsschnelle Spaltenkomponente mit einem dunklen, monochromatischen Design, das sich für die Präsentation von Portfolios eignet.

Vorschau

HTML-Code 

<div class="dark:bg-gray-900 dark:text-gray-200 min-h-screen p-8">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6">
      <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum1/400/300" alt="Project 1">
      <h3 class="text-xl font-semibold mb-2">Project One</h3>
      <p class="text-gray-400 text-sm">A brief description of project one, highlighting its key features and technologies used.</p>
    </div>
    <div class="bg-gray-800 rounded-lg shadow-lg p-6">
      <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum2/400/300" alt="Project 2">
      <h3 class="text-xl font-semibold mb-2">Project Two</h3>
      <p class="text-gray-400 text-sm">Another project description, focusing on the impact and results of the work.</p>
    </div>
    <div class="bg-gray-800 rounded-lg shadow-lg p-6">
      <img class="w-full h-48 object-cover rounded-md mb-4" src="https://picsum.photos/seed/picsum3/400/300" alt="Project 3">
      <h3 class="text-xl font-semibold mb-2">Project Three</h3>
      <p class="text-gray-400 text-sm">Description for the third project, detailing the creative process and solutions.</p>
    </div>
  </div>
</div>

Verwandte Komponenten

Spalten-Komponente

Eine responsive Spaltenkomponente, die mit Tailwind CSS für den Dunkelmodus gestaltet wurde und Avatar- und Bildplatzhalter enthält.

Offen

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

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