Componente Schede
Componente di schede reattive con microinterazioni e supporto per temi scuri.
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
Industrial_Farming_Cards_Component
Un set di schede reattive con un'estetica industriale e di materie prime, colori neutri caldi e supporto per la modalità scura, adatto per siti Web di agricoltura e agricoltura. Presenta elementi esposti e un design utilitaristico.
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.
Componente Schede
Un componente della carta semplice, pulito e affidabile adatto per ambienti aziendali / professionali, progettato specificamente per applicazioni di criptovaluta e blockchain. È dotato di una combinazione di colori complementari, un design reattivo e il supporto per la modalità oscura.