Componente Visualizzazione contenuto
Un componente di visualizzazione dei contenuti reattivo caratterizzato da uno stile di design minimalista e piatto, ideale per blog e consumo di contenuti. Ha una combinazione di colori in scala di grigi ed è dotato di elementi interattivi mentre supporta la modalità oscura.
Codice HTML
<div class="max-w-xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
<div class="ml-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">January 1, 2023</p>
</div>
</div>
<h3 class="text-lg font-bold text-gray-800 dark:text-gray-200">Understanding Minimalism in Design</h3>
<img class="w-full h-48 object-cover rounded-md my-4" src="https://picsum.photos/640/360?random=1" alt="Content Image">
<p class="text-gray-700 dark:text-gray-300 mb-4">Minimalism in design is all about simplicity and the use of space. By focusing on fewer elements, designers can create engaging experiences that are not only functional but also aesthetically pleasing. In this blog post, we will explore the principles of minimalism and how they can be applied.</p>
<a href="#" class="inline-block bg-gray-800 text-white rounded-md px-4 py-2 hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-400">Read More</a>
</div>Componenti correlati
Componenti di visualizzazione dei contenuti Componente 11
Un componente di visualizzazione dei contenuti in stile retrò/vintage con design nostalgici degli anni '80/'90, con effetti reattivi e supporto per temi scuri.
Componente Visualizzazione contenuto
Un componente di visualizzazione dei contenuti in stile 3D che mostra il portfolio di lavori o prodotti con una combinazione di colori in scala di grigi e un design reattivo, incluso il supporto della modalità scura.
Visualizzazione di contenuti semplici
Un semplice componente di visualizzazione dei contenuti con design reattivo e supporto per temi scuri utilizzando Tailwind CSS.