Tarjeta de contenido de diseño de materiales para la educación
Una tarjeta de contenido simple y receptiva diseñada con los principios de Material Design, esquema de color azul corporativo y soporte de modo oscuro, adecuada para plataformas educativas.
Código HTML
<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl">
<!-- Card Header with Image -->
<div class="relative">
<img class="w-full h-40 object-cover" src="https://picsum.photos/400/250?random=1" alt="Course Thumbnail">
<div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black to-transparent">
<h3 class="text-xl font-bold text-white leading-tight">Introduction to Web Development</h3>
</div>
</div>
<!-- Card Content -->
<div class="p-4 flex flex-col gap-3">
<p class="text-gray-700 dark:text-gray-300 text-sm leading-relaxed">
Learn the fundamentals of HTML, CSS, and JavaScript to build your first websites. This course is perfect for beginners.
</p>
<div class="flex items-center justify-between text-sm text-gray-600 dark:text-gray-400">
<div class="flex items-center gap-1">
<svg class="w-4 h-4 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
<span>2h 30m</span>
</div>
<div class="flex items-center gap-1">
<svg class="w-4 h-4 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 01-8 8v-8H2z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg>
<span>5 Modules</span>
</div>
</div>
</div>
<!-- Card Footer with Action Button -->
<div class="px-4 py-3 bg-gray-50 dark:bg-gray-700 flex justify-end">
<button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md shadow transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
Start Course
</button>
</div>
</div>
</div>Componentes relacionados
Skeuomorphic_Fashion_Card
Una tarjeta de visualización de contenido simple y responsiva para productos de moda y belleza, diseñada con una estética esqueuomórfica utilizando tonos azules corporativos. Incluye soporte para modo oscuro.
Tarjeta postal retro para redes sociales
Un componente de postal de redes sociales receptivo con una estética retro / vintage de los 80 / 90, que utiliza un esquema de color análogo (cielo, verde azulado, morado) con acentos fucsia. Cuenta con soporte para modo oscuro y efectos interactivos de desplazamiento. El contenido incluye el avatar del usuario, el nombre de usuario, la marca de tiempo, la publicación de texto, la imagen y los botones de acción (me gusta, comentar, compartir). Construido con Tailwind CSS.
Playful_Farming_Content_Card
Una tarjeta de visualización de contenido simple, lúdica y de alto contraste adecuada para sitios web agrícolas y agrícolas, con elementos redondeados y soporte para modo oscuro.