Volet Composantes sociales
Composant du portefeuille conçu en mode sombre avec une palette de couleurs monochromatiques. Il présente des travaux ou des produits avec une mise en page simple.
HTML Code
<div class="bg-gray-900 text-gray-100 p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-bold mb-4">My Portfolio</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-gray-800 p-4 rounded-lg shadow">
<img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=1" alt="Project 1" />
<h3 class="text-xl font-semibold mt-2">Project Title 1</h3>
<p class="text-gray-400">Short description of the project goes here.</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow">
<img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=2" alt="Project 2" />
<h3 class="text-xl font-semibold mt-2">Project Title 2</h3>
<p class="text-gray-400">Short description of the project goes here.</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow">
<img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=3" alt="Project 3" />
<h3 class="text-xl font-semibold mt-2">Project Title 3</h3>
<p class="text-gray-400">Short description of the project goes here.</p>
</div>
<div class="bg-gray-800 p-4 rounded-lg shadow">
<img class="h-32 w-full object-cover rounded-t-lg" src="https://picsum.photos/200/150?random=4" alt="Project 4" />
<h3 class="text-xl font-semibold mt-2">Project Title 4</h3>
<p class="text-gray-400">Short description of the project goes here.</p>
</div>
</div>
<hr class="my-6 border-gray-700" />
<div class="flex items-center justify-between">
<div class="flex items-center">
<img class="h-10 w-10 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar" />
<div>
<h4 class="text-lg font-semibold">Your Name</h4>
<p class="text-gray-400">Your Title or Profession</p>
</div>
</div>
<a href="#" class="bg-blue-600 text-gray-100 py-2 px-4 rounded hover:bg-blue-700 transition duration-300">Contact Me</a>
</div>
</div>Composants associés
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.
Volet Composantes sociales
Il s’agit d’un composant social complexe de style industriel pour les systèmes de réservation et de réservation, avec des neutres froids, des éléments exposés et la prise en charge du mode sombre. Conçu pour les systèmes de rendez-vous et de réservation.
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.