Composant fonctionnel du neumorphisme
Un composant web suivant le style de conception Neumorphism, construit avec Tailwind CSS. Il prend en charge le responsive design et le mode sombre uniquement via CSS.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-6">
<div class="w-full max-w-sm bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic dark:shadow-neumorphic-dark">
<div class="flex flex-col items-center">
<img src="https://randomuser.me/api/portraits/women/81.jpg" alt="Avatar" class="w-24 h-24 rounded-full shadow-neumorphic-inset dark:shadow-neumorphic-dark-inset mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Jane Doe</h2>
<p class="text-gray-600 dark:text-gray-300 text-center mb-6">Frontend Developer | Neumorphism Enthusiast</p>
<div class="flex justify-around w-full">
<button class="p-3 rounded-full bg-gray-200 dark:bg-gray-800 shadow-neumorphic dark:shadow-neumorphic-dark text-gray-600 dark:text-gray-300 hover:shadow-neumorphic-press dark:hover:shadow-neumorphic-dark-press transition duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
</svg>
</button>
<button class="p-3 rounded-full bg-gray-200 dark:bg-gray-800 shadow-neumorphic dark:shadow-neumorphic-dark text-gray-600 dark:text-gray-300 hover:shadow-neumorphic-press dark:hover:shadow-neumorphic-dark-press transition duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
</svg>
</button>
<button class="p-3 rounded-full bg-gray-200 dark:bg-gray-800 shadow-neumorphic dark:shadow-neumorphic-dark text-gray-600 dark:text-gray-300 hover:shadow-neumorphic-press dark:hover:shadow-neumorphic-dark-press transition duration-200">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0l-6 6"/>
</svg>
</button>
</div>
</div>
</div>
</div>
<style>
.shadow-neumorphic {
box-shadow: 7px 7px 15px #a7a7a7,
-7px -7px 15px #ffffff;
}
.shadow-neumorphic-inset {
box-shadow: inset 7px 7px 15px #a7a7a7,
inset -7px -7px 15px #ffffff;
}
.shadow-neumorphic-press {
box-shadow: inset 5px 5px 10px #a7a7a7,
inset -5px -5px 10px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 7px 7px 15px #4b5563,
-7px -7px 15px #374151;
}
.dark .shadow-neumorphic-dark-inset {
box-shadow: inset 7px 7px 15px #4b5563,
inset -7px -7px 15px #374151;
}
.dark .shadow-neumorphic-dark-press {
box-shadow: inset 5px 5px 10px #4b5563,
inset -5px -5px 10px #374151;
}
</style>Composants associés
Composant fonctionnel du commerce électronique
Composant de commerce électronique de conception plate minimaliste avec palette de couleurs triadique et prise en charge réactive du mode sombre.
Composante fonctionnelle des soins de santé
Un composant réactif et thématique pour les applications de santé, avec un design industriel, des couleurs sourdes et la prise en charge du mode sombre. Affiche les données du patient/capteur avec des actions rapides.
Composants fonctionnels
Composant fonctionnel de tableau de bord minimaliste avec un design réactif et une prise en charge du thème sombre.