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
Crypto_Blockchain_Cards_Component
Un conjunto de tarjetas responsivas diseñadas para aplicaciones de criptomonedas y blockchain, con un esquema de color neutro cálido, sombras inspiradas en el material y compatibilidad con el modo oscuro.
Componente de tarjetas 3D
Un componente de tarjeta receptivo con un estilo de diseño 3D, colores vibrantes y múltiples elementos interactivos, adecuado para un tablero. Es compatible con el modo oscuro usando el prefijo oscuro de Tailwind.
Componente de tarjetas de morfismo de vidrio
Componente de tarjetas de morfismo de vidrio con colores vibrantes. Diseño responsivo con soporte para temas oscuros. Utiliza picsum.photos para las imágenes y randomuser.me para los avatares.