Componente Visualizzazione contenuto
Un componente di visualizzazione dei contenuti reattivo con Glassmorphism, con sfondo sfocato ed elementi traslucidi con supporto per la modalità oscura.
Codice HTML
<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-5">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 backdrop-filter backdrop-blur-lg bg-opacity-30 border border-gray-200 dark:border-gray-700">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Content Display Title</h2>
<p class="text-gray-600 dark:text-gray-300 mb-4">This component features a glassmorphism style with blurred background and translucent elements.</p>
<div class="flex items-center space-x-4 mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
<div>
<h3 class="text-lg font-medium text-gray-800 dark:text-white">User Name</h3>
<span class="text-sm text-gray-500 dark:text-gray-400">User Title</span>
</div>
</div>
<img src="https://picsum.photos/400/200" alt="Random Image" class="rounded-lg mb-4">
<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded transition duration-200">Read More</button>
</div>
</div>Componenti correlati
Componente Visualizzazione contenuto
Un componente di visualizzazione dei contenuti progettato in uno stile scheumorfico per l'e-commerce con un tema scuro. Mette in mostra prodotti con elementi minimali, utilizzando una combinazione di colori analoga per un'estetica piacevole.
Componenti di visualizzazione dei contenuti
Un semplice componente di visualizzazione di contenuti reattivi in stile vintage per l'e-commerce, che utilizza una combinazione di colori monocromatica e supporta la modalità scura.
Componenti di visualizzazione dei contenuti
Un componente reattivo per la visualizzazione dei contenuti dei social media progettato in stile scheumorfico con colori pastello, con più elementi interattivi e supporto per la modalità oscura.