Componente funzionale del neumorfismo
Un componente web che segue lo stile di design Neumorphism, costruito con Tailwind CSS. Supporta il design reattivo e la modalità oscura esclusivamente tramite CSS.
Codice HTML
<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>Componenti correlati
Componente governativo monocromatico ispirato alla carta/stampa
Un componente di media complessità che imita la carta fisica e i materiali di stampa, progettato per siti Web governativi/di servizio pubblico con una combinazione di colori monocromatica e una reattività completa, incluso il supporto della modalità scura.
Componenti funzionali Componente
Componente del dashboard con componenti funzionali che utilizzano i principi di Material Design, una combinazione di colori analoga e una complessità moderata. Il componente include il design reattivo e il supporto per i temi scuri utilizzando Tailwind CSS. Non è incluso alcun JavaScript.
Componenti funzionali Componente
Una scheda prodotto di e-commerce semplice e reattiva ispirata al 3D con una combinazione di colori analoga, che supporta la modalità scura.