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
Colonnes en niveaux de gris réactives de style 3D pour une page de portfolio, avec prise en charge du mode sombre.
Composante des colonnes brutalistes
Un composant complexe de colonnes au design brutaliste, avec une palette de couleurs monochromatiques, adapté à la consommation de blogs ou de contenu. Le design présente un contraste élevé, des mises en page inhabituelles et prend en charge le mode sombre.
Composant Colonnes
Une mise en page simple à trois colonnes pour un tableau de bord, avec des cartes de type 3D avec des couleurs vives et la prise en charge du mode sombre.