Visualizzazione di contenuti semplici
Un semplice componente di visualizzazione dei contenuti con design reattivo e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class="container mx-auto p-4 max-w-sm">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/123/400/300" alt="Placeholder image">
<div class="p-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Article Title</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">This is a brief description of the article content. It provides a sneak peek into what the user can expect to read.</p>
<div class="flex items-center mt-4">
<img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author avatar">
<span class="text-gray-700 dark:text-gray-400 text-sm">John Doe</span>
</div>
</div>
</div>
</div>Componenti correlati
Industrial_3D_Content_Display
Un componente di visualizzazione dei contenuti semplice e reattivo per le aziende manifatturiere/industriali, caratterizzato da un design 3D discreto che utilizza colori tenui e supporto per la modalità scura.
Componenti di visualizzazione dei contenuti
Un componente di visualizzazione dei contenuti reattivo per il consumo di blog o contenuti con uno stile di progettazione 3D e supporto per temi scuri.
Pastel3DBlogContentCard
Un componente di visualizzazione dei contenuti reattivo per blog o sezioni di contenuti, progettato con Tailwind CSS. Presenta un layout semplice con un'estetica ispirata al 3D che utilizza ombre ed effetti al passaggio del mouse. La combinazione di colori è pastello tenue per la modalità chiara, con un tema compatibile con la modalità scura. Il componente include un'immagine, un titolo, metadati (autore/data), un estratto e un pulsante "Leggi di più". Le immagini segnaposto vengono utilizzate da picsum.photos e randomuser.me.