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 delle schede meteorologiche Bauhaus
Un componente di schede meteo/clima semplice e reattivo ispirato ai principi di progettazione del Bauhaus, caratterizzato da forme geometriche e una combinazione di colori triadica. Include il supporto per la modalità oscura.
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
Un componente reattivo per blog/scheda di contenuti progettato con uno stile scheumorfico e toni della terra. Include un titolo, un'immagine, una breve descrizione e un avatar per le informazioni sull'autore. Supporta la modalità oscura.