Composants Conteneur Composant du conteneur 30

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.

Aperçu

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

Composant de conteneur réactif avec prise en charge du mode sombre pour le commerce électronique

Ouvrir

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.

Ouvrir

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.

Ouvrir