Componente contenitore
Un semplice componente contenitore reattivo per il consumo di blog/contenuti con microinterazioni e supporto per temi scuri utilizzando Tailwind CSS.
Codice HTML
<div class="container mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg transition-all duration-300 ease-in-out hover:shadow-xl">
<div class="flex flex-col items-center">
<img src="https://picsum.photos/400/200" alt="Blog Image" class="w-full h-48 object-cover rounded-md transition-transform duration-300 ease-in-out hover:scale-105">
<h2 class="mt-4 text-2xl font-semibold text-gray-800 dark:text-white transition-colors duration-300">Blog Title</h2>
<p class="mt-2 text-gray-600 dark:text-gray-400 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
<div class="flex items-center mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-600">
<div class="ml-2">
<p class="text-gray-800 dark:text-white font-semibold">Author Name</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">Date Published</p>
</div>
</div>
</div>
</div>Componenti correlati
Contenitore di design dei materiali
Un componente contenitore in stile Material Design che utilizza Tailwind CSS, con design reattivo e supporto per temi scuri.
Componente contenitore
Un componente contenitore in stile retrò/vintage per i portafogli, con una combinazione di colori monocromatica e supporto per la modalità scura.
Contenitore Portfolio Glassmorphism
Un componente contenitore Glassmorphism reattivo con supporto per la modalità oscura su misura per un sito Web di portfolio che utilizza Tailwind CSS. Presenta un effetto vetro smerigliato, una combinazione di colori triadica, più elementi interattivi e utilizza picsum.photos per le immagini e randomuser.me per gli avatar.