Composant du conteneur 30
Un composant de conteneur de conception 3D réactif qui intègre des éléments tridimensionnels pour plus de profondeur et d’engagement avec la prise en charge du thème sombre.
HTML Code
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden transform transition-transform duration-300 hover:scale-105">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">3D Design Container</h2>
<p class="text-gray-600 dark:text-gray-400 mb-6">This container showcases a 3D design style with engaging depth. It looks appealing in both light and dark themes.</p>
<div class="flex items-center">
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div>
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h3>
<p class="text-gray-500 dark:text-gray-400">User Role</p>
</div>
</div>
</div>
<div class="relative overflow-hidden">
<img class="w-full h-48 object-cover transform transition-transform duration-300"
src="https://picsum.photos/800/400?random=1" alt="Random Image">
<div class="absolute inset-0 bg-gradient-to-t from-black opacity-30"></div>
</div>
</div>Composants associés
Composant de conteneur
Un conteneur de conception matérielle réactif pour le commerce électronique, avec des couleurs pastel, une prise en charge du mode sombre et des éléments interactifs complexes à l’aide de Tailwind CSS.
Composant de conteneur
Un composant de conteneur de style rétro/vintage pour les portfolios, avec une palette de couleurs monochromatiques et la prise en charge du mode sombre.
Composant de conteneur
Un composant de conteneur réactif avec des micro-interactions qui présente des animations attrayantes réagissant aux actions de l’utilisateur, prend en charge le mode sombre et utilise Tailwind CSS.