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.
Codice HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<div class="flex flex-col md:flex-row items-center p-6">
<img class="w-full md:w-1/3 h-auto rounded-lg mb-4 md:mb-0" src="https://picsum.photos/300/200?random=1" alt="Random retro image">
<div class="md:ml-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Retro/Vintage Title</h2>
<p class="text-gray-600 dark:text-gray-400 mb-2">This is a nostalgic description that evokes the design style of the 80s and 90s, full of vibrant colors and retro aesthetics.</p>
<div class="flex items-center">
<img class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-700 mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<span class="text-gray-700 dark:text-gray-300">Posted by <span class="font-bold">User Name</span></span>
</div>
</div>
</div>
<div class="p-6">
<p class="text-gray-700 dark:text-gray-300">Here’s a bit more detail about the content. This section can be used to provide additional context or information.</p>
</div>
<div class="bg-gray-100 dark:bg-gray-700 p-4 text-right">
<button class="bg-blue-500 text-white rounded-md px-4 py-2 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">Read More</button>
</div>
</div>Componenti correlati
Componente Visualizzazione contenuto
Un componente in stile glassmorphism per la visualizzazione di contenuti di portfolio con elementi interattivi, che supporta la modalità scura.
Componente Visualizzazione contenuto
Un semplice componente di visualizzazione dei contenuti reattivi per le interfacce dei social media, progettato con i principi del Material Design e una combinazione di colori triadica.
Componente Componenti di visualizzazione dei contenuti
Un componente di visualizzazione dei contenuti con microinterazioni, design reattivo e supporto per temi scuri utilizzando Tailwind CSS. Presenta sottili effetti Hover e animazioni di messa a fuoco su elementi interattivi.