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
Composants fonctionnels
Un composant fonctionnel avec une conception 3D, des effets réactifs et la prise en charge du mode sombre, implémenté à l’aide de Tailwind CSS.
Composants fonctionnels
Un composant de tableau de bord avec des composants fonctionnels utilisant les principes de conception matérielle, une palette de couleurs analogue et une complexité modérée. Le composant comprend une conception réactive et la prise en charge du thème sombre à l’aide de Tailwind CSS. Aucun JavaScript n’est inclus.
Composants fonctionnels
Un composant Web imitant ses homologues du monde réel dans un style d’entreprise avec une palette de couleurs complémentaire, une mise en page simple et un design réactif avec prise en charge du mode sombre.