Composant Colonnes
Un composant de colonnes réactives conçu selon les principes de Material Design, utilisant Tailwind CSS pour le style, la prise en charge des thèmes sombres et les animations réactives.
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>
Composants associés
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.
Composant Colonnes
Un composant de colonnes réactives conçu avec une esthétique rétro/vintage, prenant en charge les thèmes clairs et sombres. Comprend des images fictives et des avatars de picsum.photos et randomuser.me respectivement.