Composants Composantes interactives Composante des composantes interactives

Composante des composantes interactives

Un composant interactif 3D présentant des cartes avec des effets de profondeur, un design réactif et une prise en charge du thème sombre.

Aperçu

HTML Code

<div class="flex flex-wrap justify-center gap-4 p-6 bg-gray-100 dark:bg-gray-900 transition-all duration-300">
    <div class="rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 dark:bg-gray-800 bg-white p-4">
        <img src="https://picsum.photos/200/300" alt="Placeholder Image" class="rounded-md mb-4">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Card Title 1</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a brief description of the first card. It's an engaging component.</p>
    </div>
    <div class="rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 dark:bg-gray-800 bg-white p-4">
        <img src="https://picsum.photos/200/300?random=1" alt="Placeholder Image" class="rounded-md mb-4">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Card Title 2</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a brief description of the second card. Enjoy the depth effect!</p>
    </div>
    <div class="rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 dark:bg-gray-800 bg-white p-4">
        <img src="https://picsum.photos/200/300?random=2" alt="Placeholder Image" class="rounded-md mb-4">
        <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Card Title 3</h2>
        <p class="text-gray-600 dark:text-gray-300">This is a brief description of the third card. The 3D design enhances engagement.</p>
    </div>
</div>

Composants associés

Composante des composantes interactives

Composant interactif de conception matérielle avec effets réactifs et prise en charge du thème sombre.

Ouvrir

Composante des composantes interactives

Un composant interactif complexe pour les médias sociaux avec un design skeuomorphe et une palette de couleurs monochromatiques.

Ouvrir

Composante des composantes interactives

Un composant complexe et interactif de style Neumorphisme avec une palette de couleurs vives, conçu pour les sites Web d’alimentation/restaurants. Il comprend des boutons interactifs, des curseurs et des éléments de sélection, avec une prise en charge du mode sombre et une réactivité totale.

Ouvrir