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
Composantes sociales
Un composant social skeuomorphe conçu à des fins de blogs/contenu avec des couleurs vives et la prise en charge du mode sombre.
Volet Composantes sociales
Un composant de médias sociaux simple et réactif avec des animations attrayantes et un thème sombre, utilisant Tailwind CSS.
Volet Composantes sociales
Un composant social simple conçu avec un style skeuomorphe utilisant des couleurs vives pour un site d’entreprise professionnel, un design réactif avec prise en charge du mode sombre.