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.
Código HTML
<div class="flex items-center justify-center min-h-screen px-4 py-8 bg-gray-100 dark:bg-gray-900">
<div class="w-full max-w-sm overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800">
<img class="object-cover object-center w-full h-56" src="https://picsum.photos/seed/material/400/300" alt="Card image">
<div class="px-6 py-4">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at ante non diam consequat consectetur at et metus.</p>
</div>
<div class="px-6 py-4">
<button class="px-4 py-2 text-sm font-medium text-blue-600 transition-colors duration-200 transform rounded-md hover:bg-blue-500 hover:text-white focus:outline-none focus:bg-blue-500 focus:text-white dark:text-blue-400 dark:hover:bg-blue-400 dark:hover:text-gray-900 dark:focus:bg-blue-400 dark:focus:text-gray-900">Action 1</button>
<button class="px-4 py-2 ml-4 text-sm font-medium text-blue-600 transition-colors duration-200 transform rounded-md hover:bg-blue-500 hover:text-white focus:outline-none focus:bg-blue-500 focus:text-white dark:text-blue-400 dark:hover:bg-blue-400 dark:hover:text-gray-900 dark:focus:bg-blue-400 dark:focus:text-gray-900">Action 2</button>
</div>
</div>
</div>Componentes relacionados
Tarjeta de comercio electrónico
Componente de tarjeta de comercio electrónico receptivo con soporte de modo oscuro utilizando los principios de Tailwind CSS y Material Design. Cuenta con un esquema de colores vibrantes con complejidad moderada que incluye elementos interactivos como botones y efectos de desplazamiento. Utiliza un diseño basado en cuadrículas e incorpora sombras para darle profundidad.
Componente de tarjetas
Un componente de tarjetas complejo diseñado para el modo oscuro, adecuado para el consumo de blogs y contenido con un esquema de color triádico.
Componente de tarjetas
Un componente de tarjeta de blog/contenido responsivo diseñado con estilo skeuomórfico y tonos tierra. Incluye un título, una imagen, una breve descripción y un avatar para información del autor. Soporta el modo oscuro.