CCHub Logo CCHub Tailwind Collection
Komponenten Spalten Spalten-Komponente

Spalten-Komponente

Eine responsive Columns-Komponente, die für Blogs oder die Nutzung von Inhalten entwickelt wurde. Es verfügt über ein minimalistisches, flaches Design mit einem analogen Farbschema und Unterstützung für dunkle Themen.

Vorschau

HTML-Code 

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-3xl font-bold mb-4 text-gray-800 dark:text-white">Latest Articles</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 1</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=2" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 2</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=3" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 3</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=4" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 4</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=5" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 5</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-900 rounded-lg overflow-hidden shadow">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=6" alt="Article Image">
      <div class="p-4">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Article Title 6</h3>
        <p class="text-gray-600 dark:text-gray-400">This is a brief description of the article content that provides an overview to the readers. They can read more by clicking the link below.</p>
        <a href="#" class="mt-2 inline-block text-blue-600 dark:text-blue-400 hover:underline">Read More</a>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Spalten-Komponente

Responsive Graustufenspalten im 3D-Stil für eine Portfolio-Seite mit Unterstützung für den 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

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.

Offen