Composant Colonnes
Un composant de colonnes réactives conçu pour le mode sombre à l’aide de Tailwind CSS, avec des espaces réservés d’avatar et d’image.
HTML Code
<div class="bg-gray-900 text-white p-6">
<h2 class="text-2xl font-bold mb-4">Columns Component</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Column 1 -->
<div class="bg-gray-800 p-4 rounded shadow-lg">
<img src="https://picsum.photos/200/100" alt="Placeholder Image" class="rounded-lg mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="font-semibold">User One</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum.</p>
</div>
<!-- Column 2 -->
<div class="bg-gray-800 p-4 rounded shadow-lg">
<img src="https://picsum.photos/200/100?random=1" alt="Placeholder Image" class="rounded-lg mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="font-semibold">User Two</span>
</div>
<p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
<!-- Column 3 -->
<div class="bg-gray-800 p-4 rounded shadow-lg">
<img src="https://picsum.photos/200/100?random=2" alt="Placeholder Image" class="rounded-lg mb-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
<span class="font-semibold">User Three</span>
</div>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur.</p>
</div>
</div>
</div>Composants associés
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.
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
Un composant de colonnes réactives avec de petites animations attrayantes, adapté au e-commerce avec un thème sombre.