Conteneur de conception matérielle
Composant de conteneur de style Material Design utilisant Tailwind CSS, avec un design réactif et la prise en charge du thème sombre.
HTML Code
<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>Composants associés
Composant de conteneur
Un conteneur de tableau de bord simple et réactif avec des micro-interactions attrayantes et un thème sombre, axé sur des couleurs analogues.
Composant de conteneur
Un composant de conteneur réactif simple pour la consommation de blog/contenu avec des micro-interactions et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant de conteneur 3D
Composant de conteneur réactif pour les tableaux de bord avec une palette de couleurs vives et des éléments de conception 3D, prenant en charge le mode sombre.