Componenti Componenti di visualizzazione dei contenuti Scheda di contenuto Material Design per l'istruzione

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.

Anteprima

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 semplice componente di visualizzazione di contenuti reattivi in stile vintage per l'e-commerce, che utilizza una combinazione di colori monocromatica e supporta la modalità scura.

Aperto

Visualizzazione di contenuti semplici

Un semplice componente di visualizzazione dei contenuti con design reattivo e supporto per temi scuri utilizzando Tailwind CSS.

Aperto

Componente Visualizzazione contenuto

Un componente di visualizzazione dei contenuti reattivo con Glassmorphism, con sfondo sfocato ed elementi traslucidi con supporto per la modalità oscura.

Aperto