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 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.
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.
Composant Colonnes
Un composant de colonnes réactives avec de petites animations attrayantes, adapté au e-commerce avec un thème sombre.