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.
Codice HTML
<div class="max-w-3xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg space-y-4">
<div class="bg-green-200 dark:bg-green-700 rounded-lg overflow-hidden">
<img src="https://picsum.photos/400/200" alt="Blog Post Image" class="w-full h-48 object-cover">
</div>
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Blog Post Title</h2>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a brief description of the blog post. It provides a summary of the content and encourages users to read more.</p>
</div>
<div class="flex items-center space-x-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
<div class="text-gray-800 dark:text-gray-200">
<p class="font-semibold">Author Name</p>
<p class="text-sm text-gray-500 dark:text-gray-400">Date Published</p>
</div>
</div>
</div>Componenti correlati
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.
Schede sociali in modalità oscura
Un componente della scheda reattivo progettato per la modalità oscura con toni della terra, progettato per le interfacce dei social media.
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.