Componente di navigazione neumorfica
Un componente di navigazione semplice e reattivo con uno stile di design neumorfico, che utilizza una combinazione di colori viola/viola, adatto per un forum o una piattaforma di comunità. Include il supporto per la modalità oscura.
Codice HTML
<nav class="p-4 bg-purple-200 dark:bg-purple-900 shadow-lg dark:shadow-purple-950 rounded-xl m-4 transition-all duration-300 ease-in-out">
<div class="container mx-auto flex flex-col md:flex-row items-center justify-between">
<div class="mb-4 md:mb-0">
<a href="#" class="text-purple-800 dark:text-purple-200 text-3xl font-bold tracking-tight transform transition-transform duration-300 hover:scale-105">
<span class="block relative leading-none">
<span class="absolute inset-0 bg-gradient-to-br from-purple-400 to-purple-600 dark:from-purple-700 dark:to-purple-900 rounded-lg blur-sm opacity-70"></span>
<span class="relative z-10 p-2 rounded-lg shadow-inner-neumorphic dark:shadow-inner-neumorphic-dark text-white dark:text-purple-100">Forum Hub</span>
</span>
</a>
</div>
<div class="flex flex-wrap justify-center space-x-2 md:space-x-4">
<a href="#" class="px-4 py-2 rounded-lg text-purple-700 dark:text-purple-300 font-medium transition-all duration-300 shadow-neumorphic dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark active:text-purple-900 dark:active:text-purple-500 flex items-center">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
Home
</a>
<a href="#" class="px-4 py-2 rounded-lg text-purple-700 dark:text-purple-300 font-medium transition-all duration-300 shadow-neumorphic dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark active:text-purple-900 dark:active:text-purple-500 flex items-center">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 5a2 2 0 012-2h12a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm3 1h2v3H5V6zm4 0h2v3H9V6zm4 0h2v3h-2V6zM5 11h2v3H5v-3zm4 0h2v3H9v-3zm4 0h2v3h-2v-3z"></path></svg>
Categories
</a>
<a href="#" class="px-4 py-2 rounded-lg text-purple-700 dark:text-purple-300 font-medium transition-all duration-300 shadow-neumorphic dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark active:text-purple-900 dark:active:text-purple-500 flex items-center">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path></svg>
Messages
</a>
<a href="#" class="px-4 py-2 rounded-lg text-purple-700 dark:text-purple-300 font-medium transition-all duration-300 shadow-neumorphic dark:shadow-neumorphic-dark hover:shadow-neumorphic-pressed dark:hover:shadow-neumorphic-pressed-dark active:text-purple-900 dark:active:text-purple-500 flex items-center">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd"></path></svg>
Profile
</a>
</div>
</div>
</nav>
<style>
/* Neumorphic Shadows for Light Mode */
.shadow-neumorphic {
box-shadow: 6px 6px 12px #bca8e8, -6px -6px 12px #ffffff;
}
.shadow-neumorphic-pressed {
box-shadow: inset 4px 4px 8px #bca8e8, inset -4px -4px 8px #ffffff;
}
.shadow-inner-neumorphic {
box-shadow: inset 3px 3px 6px #8e7eb8, inset -3px -3px 6px #d8c2ff;
}
/* Neumorphic Shadows for Dark Mode */
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #4a1980, -6px -6px 12px #8e2cb7;
}
.dark .shadow-neumorphic-pressed-dark {
box-shadow: inset 4px 4px 8px #4a1980, inset -4px -4px 8px #8e2cb7;
}
.dark .shadow-inner-neumorphic-dark {
box-shadow: inset 3px 3px 6px #3a1566, inset -3px -3px 6px #5e1f9a;
}
</style>Componenti correlati
Componente di navigazione dei social media
Un componente di navigazione reattivo progettato per le interfacce dei social media, caratterizzato da un'estetica Material Design che utilizza un tema scuro con Tailwind CSS.
Componente di navigazione reattiva
Componente di navigazione reattiva con microinterazioni, combinazione di colori in scala di grigi e complessità semplice.
Componente di navigazione Material Design
Un componente di navigazione Material Design semplice e reattivo per le interfacce dei social media che utilizza una combinazione di colori in scala di grigi. Presenta un layout pulito con logo, link di navigazione, barra di ricerca e avatar dell'utente. Include il supporto per la modalità oscura utilizzando il prefisso dark: di Tailwind.