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
Un componente de redes sociales responsivo diseñado con una estética retro / vintage, con una interfaz rica con múltiples elementos interactivos y un tema oscuro.
Componente social del skeuomorfismo
Componente de redes sociales con diseño Skeuomorphism, efectos responsivos y soporte para temas oscuros.
Tarjeta de autor social 3D
Un componente de tarjeta de autor responsivo con efectos 3D y enlaces a redes sociales, diseñado para secciones de blog/contenido. Cuenta con un esquema de color complementario (azul para identidad/información, naranja para acentos/CTA), admite el modo oscuro y utiliza Tailwind CSS para el estilo. El diseño es de complejidad "simple" con un diseño básico y elementos mínimos, sin embargo, se incorpora un "diseño 3D" para mayor profundidad y compromiso mediante sombras y efectos de desplazamiento. El componente incluye un avatar, el nombre del autor, una breve biografía, iconos de redes sociales y un botón de llamada a la acción "Sígueme". Utiliza un avatar randomuser.me como marcador de posición.