Composant Colonnes
Un composant de colonnes réactives avec des éléments de conception 3D et la prise en charge du thème sombre à l’aide de Tailwind CSS.
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>
Composants associés
Composant Colonnes
Un composant de colonnes réactif conçu dans un style brutaliste avec des tons de terre, adapté au commerce électronique, avec une complexité moyenne et une prise en charge du thème sombre.
Colonnes Composant 49
Un composant de colonnes réactif avec un design skeuomorphe imitant les éléments du monde réel, avec la prise en charge du thème sombre et utilisant Tailwind CSS.
Composant Colonnes
Colonnes en niveaux de gris réactives de style 3D pour une page de portfolio, avec prise en charge du mode sombre.