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.
Codice HTML
<div class="flex flex-col items-center justify-center p-6 space-y-4 md:flex-row md:flex-wrap md:space-x-4 md:space-y-0">
<div class="bg-gradient-to-br from-green-300 to-blue-400 rounded-lg shadow-lg p-4 w-full max-w-xs dark:from-green-600 dark:to-blue-700">
<img class="rounded-t-lg" src="https://picsum.photos/300/200?random=1" alt="Card Image" />
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card Title</h2>
<p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" />
<p class="ml-2 text-gray-700 dark:text-gray-300">Author Name</p>
</div>
</div>
</div>
<div class="bg-gradient-to-br from-green-300 to-blue-400 rounded-lg shadow-lg p-4 w-full max-w-xs dark:from-green-600 dark:to-blue-700">
<img class="rounded-t-lg" src="https://picsum.photos/300/200?random=2" alt="Card Image" />
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Card Title</h2>
<p class="text-gray-600 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" />
<p class="ml-2 text-gray-700 dark:text-gray-300">Author Name</p>
</div>
</div>
</div>
</div>Componenti correlati
Componente Carte Skeuomorfe
Ispirato allo Skeuomorphism, il seguente componente della carta è completamente reattivo con il supporto del tema scuro. Per la modalità scura, il supporto CSS è sufficiente. Non è necessario alcun JavaScript.
Componente Schede
Componente di schede reattive con microinterazioni e supporto per temi scuri.
Componente Schede in modalità scura
Un componente di schede reattive progettato per siti Web aziendali/aziendali con un'interfaccia utente in modalità scura e una combinazione di colori in scala di grigi, caratterizzata da complessità e interattività moderate.