Volet Composantes sociales
Un composant social de style brut présentant des éléments de portefeuille avec une palette de couleurs triadiques, parfait pour exposer du travail ou des produits.
HTML Code
<div class="max-w-6xl mx-auto p-6 space-y-8">
<h1 class="text-4xl font-bold text-center text-gray-800 dark:text-gray-200">My Portfolio</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=1" alt="Portfolio Item 1" class="w-full h-48 object-cover rounded-md">
<h2 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Portfolio Item 1</h2>
<p class="text-gray-600 dark:text-gray-400">A short description of the first portfolio item.</p>
<div class="mt-4 flex space-x-3">
<a href="#" class="p-2 bg-blue-500 text-white rounded-lg dark:bg-blue-700 hover:bg-blue-600 dark:hover:bg-blue-600">View More</a>
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full">
</div>
</div>
<div class="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=2" alt="Portfolio Item 2" class="w-full h-48 object-cover rounded-md">
<h2 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Portfolio Item 2</h2>
<p class="text-gray-600 dark:text-gray-400">A short description of the second portfolio item.</p>
<div class="mt-4 flex space-x-3">
<a href="#" class="p-2 bg-red-500 text-white rounded-lg dark:bg-red-700 hover:bg-red-600 dark:hover:bg-red-600">View More</a>
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full">
</div>
</div>
<div class="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
<img src="https://picsum.photos/300/200?random=3" alt="Portfolio Item 3" class="w-full h-48 object-cover rounded-md">
<h2 class="mt-2 text-xl font-semibold text-gray-800 dark:text-gray-200">Portfolio Item 3</h2>
<p class="text-gray-600 dark:text-gray-400">A short description of the third portfolio item.</p>
<div class="mt-4 flex space-x-3">
<a href="#" class="p-2 bg-green-500 text-white rounded-lg dark:bg-green-700 hover:bg-green-600 dark:hover:bg-green-600">View More</a>
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full">
</div>
</div>
</div>
</div>Composants associés
Glassmorphism Carte sociale
Un composant de carte sociale glassmorphism simple et réactif avec des couleurs pastel et la prise en charge du mode sombre, adapté aux interfaces de tableau de bord.
Composantes sociales
Une section de composants sociaux conçue dans un style skeuomorphique, avec des effets réactifs et un support de thème sombre.
Volet Composantes sociales
Un composant simple de médias sociaux conçu avec le Skeuomorphisme et une palette de couleurs monochromatiques pour le contenu du blog. Il dispose d’une mise en page réactive et d’un support de thème sombre utilisant Tailwind CSS.