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 Carte Neumorfiche
Un componente di carte reattivo progettato in stile Neumorfismo con supporto per temi scuri, con ombre sottili e layout flessibile.
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 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.