Scheda di contenuto Material Design per l'istruzione
Una scheda di contenuti semplice e reattiva progettata con i principi del Material Design, la combinazione di colori blu aziendale e il supporto della modalità scura, adatta per le piattaforme educative.
Codice 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>Componenti correlati
Componenti di visualizzazione dei contenuti
Un componente reattivo per la visualizzazione dei contenuti dei social media progettato in stile scheumorfico con colori pastello, con più elementi interattivi e supporto per la modalità oscura.
Skeuomorphic_Fashion_Card
Una scheda di visualizzazione dei contenuti semplice e reattiva per prodotti di moda/bellezza, progettata con un'estetica scheumorfica che utilizza i toni del blu aziendale. Include il supporto per la modalità oscura.
Componente Componenti di visualizzazione dei contenuti
Un componente di visualizzazione dei contenuti semplice e reattivo con un effetto glassmorphism, supporto per temi scuri e una combinazione di colori complementari, adatto per blog o consumo di contenuti.