Spalten-Komponente
Eine responsive Spaltenkomponente, die nach Material Design-Prinzipien entwickelt wurde und Tailwind CSS für das Styling, die Unterstützung dunkler Designs und reaktionsschnelle Animationen verwendet.
HTML-Code
<div class="container mx-auto px-4">
<h2 class="text-2xl font-bold my-6 text-gray-800 dark:text-gray-200">Columns Component</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/150?random=1" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 1</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description for the first column. It can contain any content.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/150?random=2" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 2</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description for the second column. It can contain any content.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/150?random=3" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 3</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description for the third column. It can contain any content.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/150?random=4" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 4</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description for the fourth column. It can contain any content.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/150?random=5" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 5</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description for the fifth column. It can contain any content.</p>
</div>
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/150?random=6" alt="Placeholder" class="w-full h-48 rounded-md object-cover mb-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Column 6</h3>
<p class="text-gray-600 dark:text-gray-400">This is a description for the sixth column. It can contain any content.</p>
</div>
</div>
</div>
Verwandte Komponenten
Komponente "Brutalistische Säulen"
Eine komplexe Spaltenkomponente in einem brutalistischen Design mit einem monochromen Farbschema, das sich für den Konsum von Blogs oder Inhalten eignet. Das Design zeichnet sich durch einen hohen Kontrast und ungewöhnliche Layouts aus und unterstützt den Dunkelmodus.
Spalten-Komponente
Responsive Graustufenspalten im 3D-Stil für eine Portfolio-Seite mit Unterstützung für den Dunkelmodus.
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.