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.
Codice HTML
<div class="bg-gray-900 p-8 rounded-lg shadow-lg space-y-6 dark:bg-gray-800">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
<div class="text-white">
<h2 class="text-xl font-bold">Author Name</h2>
<p class="text-gray-400">March 1, 2023</p>
</div>
</div>
<img src="https://picsum.photos/600/400" alt="Blog Post" class="w-full rounded-lg">
<h3 class="text-white text-2xl font-semibold">Blog Post Title</h3>
<p class="text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
<div class="flex justify-between items-center">
<span class="bg-green-600 text-white py-1 px-3 rounded-full">Category</span>
<button class="bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700">Read More</button>
</div>
</div>
<div class="bg-gray-900 p-8 rounded-lg shadow-lg space-y-6 dark:bg-gray-800">
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
<div class="text-white">
<h2 class="text-xl font-bold">Author Name</h2>
<p class="text-gray-400">March 2, 2023</p>
</div>
</div>
<img src="https://picsum.photos/600/401" alt="Blog Post" class="w-full rounded-lg">
<h3 class="text-white text-2xl font-semibold">Another Blog Post Title</h3>
<p class="text-gray-300">Suspense is best enjoyed with plenty of space as you travel up the textual ladders of creativeness.</p>
<div class="flex justify-between items-center">
<span class="bg-pink-600 text-white py-1 px-3 rounded-full">Category</span>
<button class="bg-blue-600 text-white py-2 px-4 rounded hover:bg-blue-700">Read More</button>
</div>
</div>Componenti correlati
Componente Schede 3D
Un componente di scheda reattivo con uno stile di progettazione 3D, colori vivaci e più elementi interattivi, adatto per una dashboard. Supporta la modalità oscura utilizzando il prefisso scuro di Tailwind.
Componente Glassmorphism Cards
Componente Glassmorphism Cards con colori vivaci. Design reattivo con supporto per temi scuri. Utilizza picsum.photos per le immagini e randomuser.me per gli avatar.
Crypto_Blockchain_Cards_Component
Un set di schede reattive progettate per applicazioni di criptovaluta e blockchain, con una combinazione di colori neutri caldi, ombre ispirate ai materiali e supporto per la modalità oscura.