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 Carte Skeuomorfe
Un semplice componente di schede progettato in uno stile scheumorfico, utilizzando una combinazione di colori analoga per la lettura e il consumo di contenuti. Questo componente è reattivo e supporta il tema scuro.
ArtDeco_EarthTones_Cards_Technology_SaaS
Un componente di carte semplice e reattivo per applicazioni tecnologiche/SaaS, ispirato ai motivi geometrici Art Déco e a una combinazione di colori naturali nei toni della terra. Include il supporto per la modalità oscura.
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.