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
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
Une composante sociale pour un tableau de bord au design brutaliste et pastel. Il affiche un profil utilisateur avec un nom, un titre et un avatar, et comprend des boutons pour les actions sociales telles que le suivi, la messagerie et le partage. Le composant est réactif et prend en charge le mode sombre.
Volet Composantes sociales
Une carte de réseau social simple et réactive pour le contenu d’actualité/journalisme avec une esthétique industrielle et une palette de couleurs d’automne, y compris la prise en charge du mode sombre.