Contenitore di design dei materiali
Un componente contenitore in stile Material Design che utilizza Tailwind CSS, con design reattivo e supporto per temi scuri.
Codice HTML
<div class="container mx-auto p-4 shadow-lg rounded-lg bg-white dark:bg-gray-800 transition-colors duration-300">
<div class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">Material Container</div>
<p class="text-gray-700 dark:text-gray-300">This is a responsive container with Material Design inspired shadows and styling. It also supports dark mode.</p>
<div class="mt-4">
<img src="https://picsum.photos/seed/material-container/400/200" alt="Placeholder Image" class="rounded-md shadow-md">
</div>
<div class="flex items-center mt-4">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of a user">
<div class="text-sm">
<p class="text-gray-900 dark:text-white leading-none">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">Software Engineer</p>
</div>
</div>
</div>Componenti correlati
Componente contenitore Glassmorphism
Un componente contenitore Glassmorphism reattivo con una combinazione di colori triadica, progettato per i portfolio. Supporta la modalità oscura.
Componente contenitore neumorfico
Un componente contenitore neumorfico reattivo per mostrare lavori o prodotti, progettato con una combinazione di colori triadica e il supporto del tema scuro, utilizzando Tailwind CSS.
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.