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
Composant Composants interactifs Neumorphism
Composants interactifs Neumorphism pour les sites Web d’entreprise/d’entreprise
Fiche produit brutaliste
Un composant simple de carte produit interactive pour le e-commerce, avec un design brutaliste en niveaux de gris. Il comporte une image de produit, un titre, un prix et un bouton « Ajouter au panier ». Le composant est réactif et prend en charge le mode sombre. Des effets de survol sont inclus pour l’interactivité.