Carte de contenu de conception matérielle pour l’éducation
Une carte de contenu simple et réactive conçue avec les principes de conception matérielle, la palette de couleurs bleues de l’entreprise et la prise en charge du mode sombre, adaptée aux plateformes éducatives.
HTML Code
<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>Composants associés
Composant d’affichage du contenu
Un composant simple d’affichage de contenu réactif pour les interfaces de médias sociaux, conçu avec les principes de conception matérielle et une palette de couleurs triadique.
Memphis_Muted_Consulting_Content_Display
Un composant d’affichage de contenu pour le conseil/les services, inspiré du design de Memphis avec des couleurs sourdes et des motifs géométriques. Réactif avec prise en charge du mode sombre.
Composant Composants d’affichage de contenu
Un composant d’affichage de contenu avec des microinteractions, une conception réactive et la prise en charge du thème sombre à l’aide de Tailwind CSS. Propose des effets de survol subtils et des animations de concentration sur des éléments interactifs.