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 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 carta Brutalista
Un componente di carta brutalista con design reattivo e supporto per la modalità oscura.
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.