CCHub Logo CCHub Tailwind Collection
Komponenten Spalten Spalten-Komponente

Spalten-Komponente

Eine responsive Spaltenkomponente mit 3D-Designelementen und Unterstützung für dunkle Themen mit Tailwind CSS.

Vorschau

HTML-Code 

<div class="container mx-auto p-4">
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out">
      <img src="https://picsum.photos/300/200?random=1" alt="Image 1" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Column Title 1</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a description for column one. It includes engaging content about the service or feature.</p>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out">
      <img src="https://picsum.photos/300/200?random=2" alt="Image 2" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Column Title 2</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a description for column two. Showcase your content effectively with appealing design.</p>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform hover:scale-105 transition-transform duration-300 ease-in-out">
      <img src="https://picsum.photos/300/200?random=3" alt="Image 3" class="w-full h-48 object-cover">
      <div class="p-4">
        <h2 class="text-xl font-semibold text-gray-800 dark:text-white">Column Title 3</h2>
        <p class="text-gray-600 dark:text-gray-400">This is a description for column three. Engage your users with powerful imagery and text.</p>
      </div>
    </div>
  </div>
</div>

Verwandte Komponenten

Spalten Komponenten-Neumorphismus

Spaltenkomponenten-Neumorphismus: Ein Soft-UI-Stil, der Elemente erstellt, die mit subtilen Schatten aus dem Hintergrund herauszuragen scheinen. Diese Komponente ist reaktionsschnell und unterstützt dunkle Themen. Es wird kein JavaScript-Code benötigt. Für den Dunkelmodus ist CSS-Unterstützung ausreichend.

Offen

Spalten Komponente 49

Eine responsive Columns-Komponente mit skeuomorphem Design, das reale Elemente nachahmt, mit Unterstützung für dunkle Themen und mit Tailwind CSS.

Offen

Spalten-Komponente

Responsive Graustufenspalten im 3D-Stil für eine Portfolio-Seite mit Unterstützung für den Dunkelmodus.

Offen