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.
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
Un composant interactif avec un design Glassmorphism, une palette de couleurs pastel et une mise en page simple pour le contenu du blog. Il est réactif et inclut la prise en charge du mode sombre.
Composante des composantes interactives
Un composant interactif complexe pour les médias sociaux avec un design skeuomorphe et une palette de couleurs monochromatiques.