Composante des composantes interactives
Un composant interactif de style Neumorphism avec des effets réactifs et une prise en charge du thème sombre.
HTML Code
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-neumorph p-6 w-80 text-center">
<img src="https://picsum.photos/200/100" alt="Random Placeholder" class="w-full rounded-md mb-4">
<div class="mb-2">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-16 h-16 rounded-full mx-auto shadow-md">
</div>
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">Web Developer</p>
<button class="mt-4 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-medium py-2 px-4 rounded-lg shadow-neumorph transform transition-all hover:scale-105 hover:shadow-lg">Follow</button>
</div>
</div>
<style>
.shadow-neumorph {
box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1),
-8px -8px 15px rgba(255, 255, 255, 0.7);
}
</style>Composants associés
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.
Composante des composantes interactives
Composant de composants interactifs avec conception 3D, palette de couleurs monochromatique et complexité modérée pour le commerce électronique, avec conception réactive et prise en charge du thème sombre.
Composante des composantes interactives
Un composant interactif d’inspiration brutaliste pour un blog, avec des tons de terre à contraste élevé, un design réactif et la prise en charge du mode sombre.