Componente de tarjetas
Un componente de tarjeta de portafolio receptivo con un estilo de diseño brutalista, que utiliza una combinación de colores pastel y una complejidad moderada con funciones interactivas. Esta tarjeta muestra el trabajo o los productos y es compatible con el modo oscuro.
Código HTML
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 p-6 bg-gray-50 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-900 border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img class="w-full h-32 object-cover" src="https://picsum.photos/300/200?random=1" alt="Portfolio Image" />
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Project Title</h2>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the project. This project showcases some amazing work or product.</p>
<div class="mt-4 flex space-x-2">
<a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">View</a>
<a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Code</a>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-900 border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img class="w-full h-32 object-cover" src="https://picsum.photos/300/200?random=2" alt="Portfolio Image" />
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Project Title</h2>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the project. This project showcases some amazing work or product.</p>
<div class="mt-4 flex space-x-2">
<a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">View</a>
<a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Code</a>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-900 border-2 border-gray-300 dark:border-gray-700 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img class="w-full h-32 object-cover" src="https://picsum.photos/300/200?random=3" alt="Portfolio Image" />
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Project Title</h2>
<p class="mt-2 text-gray-600 dark:text-gray-400">Short description of the project. This project showcases some amazing work or product.</p>
<div class="mt-4 flex space-x-2">
<a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">View</a>
<a href="#" class="inline-block bg-gray-200 dark:bg-gray-600 text-gray-800 dark:text-gray-200 px-3 py-1 rounded-md hover:bg-gray-300 dark:hover:bg-gray-500 transition duration-300 ease-in-out">Code</a>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de tarjetas de modo oscuro
Un componente de tarjetas responsivas diseñado para sitios web comerciales/corporativos con una interfaz de usuario de modo oscuro y un esquema de color en escala de grises, con una complejidad e interactividad moderadas.
Cartas sociales del modo oscuro
Un componente de tarjeta receptivo diseñado para el modo oscuro con tonos tierra, diseñado para interfaces de redes sociales.
Tarjeta de diseño de materiales
Un componente de tarjeta de estilo Material Design con comportamiento responsivo y compatibilidad con el modo oscuro mediante CSS de Tailwind. Cuenta con efectos de elevación y ondulación, señales visuales.