Componente de Componentes Sociales
Un componente de cartera diseñado en modo oscuro con una combinación de colores monocromática. Muestra trabajos o productos con un diseño simple.
Código HTML
<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>Componentes relacionados
Componente de Componentes Sociales
Una tarjeta de redes sociales simple y receptiva para contenido de noticias/periodismo con una estética industrial y una combinación de colores otoñales, que incluye soporte para el modo oscuro.
Componente de Componentes Sociales
Un componente de redes sociales diseñado para un portafolio, con diseño responsivo y soporte de temas oscuros usando Tailwind CSS. Incluye marcadores de posición para avatares y nombres de usuarios.
Social_Components_Component
Un componente social de comercio electrónico receptivo e interactivo con una estética de diseño 3D, combinación de colores complementaria y compatibilidad con el modo oscuro. Cuenta con reseñas/testimonios de usuarios, calificaciones de estrellas y una llamada a la acción "compartir".