Composant Colonnes
Un composant de colonnes minimaliste avec une palette de couleurs en niveaux de gris conçu pour les interfaces de réseaux sociaux. Il dispose d’une mise en page réactive avec prise en charge du thème sombre.
HTML Code
<div class="container mx-auto p-4 md:p-8">
<h1 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">User Profiles</h1>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
<img class="rounded-full w-24 h-24 mx-auto" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center mt-2">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400 text-center">@johndoe</p>
<p class="text-gray-500 dark:text-gray-300 text-center mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<img class="mt-4 rounded-lg" src="https://picsum.photos/300/200?random=1" alt="Random Image">
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
<img class="rounded-full w-24 h-24 mx-auto" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center mt-2">Jane Smith</h2>
<p class="text-gray-600 dark:text-gray-400 text-center">@janesmith</p>
<p class="text-gray-500 dark:text-gray-300 text-center mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<img class="mt-4 rounded-lg" src="https://picsum.photos/300/200?random=2" alt="Random Image">
</div>
<div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
<img class="rounded-full w-24 h-24 mx-auto" src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 text-center mt-2">Michael Johnson</h2>
<p class="text-gray-600 dark:text-gray-400 text-center">@michaeljohnson</p>
<p class="text-gray-500 dark:text-gray-300 text-center mt-2">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
<img class="mt-4 rounded-lg" src="https://picsum.photos/300/200?random=3" alt="Random Image">
</div>
</div>
</div>Composants associés
Composant Colonnes
Un composant de colonnes réactives conçu pour la présentation de portfolios avec prise en charge du mode sombre, à l’aide d’un jeu de couleurs en niveaux de gris et de Tailwind CSS.
Composant Colonnes
Un composant de colonnes conçu avec le style Glassmorphism, des couleurs vives et une disposition simple, adaptée à un tableau de bord.
Composant Colonnes
Un composant de colonnes réactives avec de petites animations attrayantes, adapté au e-commerce avec un thème sombre.