Componente Schede

Componente di schede reattive con microinterazioni e supporto per temi scuri.

Anteprima

Codice HTML

<div class="container mx-auto p-4">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum1/600/400" alt="Card image cap">
      <div class="p-4">
        <h5 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Card title</h5>
        <p class="text-gray-700 dark:text-gray-300 text-base mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
        </p>
        <a href="#" class="inline-block bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition-colors duration-300">Read more</a>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum2/600/400" alt="Card image cap">
      <div class="p-4">
        <h5 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Card title</h5>
        <p class="text-gray-700 dark:text-gray-300 text-base mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
        </p>
        <a href="#" class="inline-block bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition-colors duration-300">Read more</a>
      </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transform hover:scale-105 transition-transform duration-300">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/picsum3/600/400" alt="Card image cap">
      <div class="p-4">
        <h5 class="text-xl font-bold text-gray-900 dark:text-white mb-2">Card title</h5>
        <p class="text-gray-700 dark:text-gray-300 text-base mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue.
        </p>
        <a href="#" class="inline-block bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition-colors duration-300">Read more</a>
      </div>
    </div>
  </div>
</div>

Componenti correlati

Componente Schede

Componente scheda in modalità scura reattiva per portafoglio con combinazione di colori pastello.

Aperto

Componente Carte Skeuomorfe

Un semplice componente di schede progettato in uno stile scheumorfico, utilizzando una combinazione di colori analoga per la lettura e il consumo di contenuti. Questo componente è reattivo e supporta il tema scuro.

Aperto

Componente Schede

Un componente di carte complesso progettato per la modalità scura, adatto per il consumo di blog e contenuti con una combinazione di colori triadica.

Aperto