Componente contenitore 21
Un componente contenitore reattivo in stile retrò/vintage con supporto per temi scuri.
Codice HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md mx-auto">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Welcome to Nostalgia</h2>
<p class="text-gray-600 dark:text-gray-300 mb-4">Experience the charm of the 80s and 90s with our carefully curated content. Dive into the vintage vibes that bring back fond memories.</p>
<img class="rounded-lg mb-4" src="https://picsum.photos/400/200?random=1" alt="Retro Image" />
<div class="flex items-center">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<div class="ml-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h3>
<p class="text-gray-500 dark:text-gray-400">Retro Enthusiast</p>
</div>
</div>
<button class="mt-6 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out">
Explore More
</button>
</div>
Componenti correlati
Componente contenitore brutalista
Un componente contenitore semplice ma audace progettato con uno stile brutalista e una combinazione di colori vivaci, adatto per siti Web aziendali o aziendali, che supporta la modalità oscura utilizzando Tailwind CSS.
Componente contenitore Glassmorphism
Un componente contenitore Glassmorphism reattivo con una combinazione di colori triadica, progettato per i portfolio. Supporta la modalità oscura.
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.