3D_Earth_Tone_Dating_Social_Navigation
Un componente di navigazione reattivo per piattaforme di appuntamenti/social, caratterizzato da un design ispirato al 3D con toni della terra e supporto per la modalità oscura. Include elementi interattivi come un avatar del profilo, la ricerca e i collegamenti di navigazione principali.
Codice HTML
<nav class="bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-800 shadow-xl relative z-40 rounded-b-xl overflow-hidden">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-20 items-center">
<div class="flex-shrink-0 flex items-center">
<a href="#" class="text-stone-700 dark:text-stone-300 font-bold text-2xl lg:text-3xl tracking-tight relative">
<span class="block transform -translate-y-1 -translate-x-1 font-extrabold text-stone-500 opacity-20 dark:text-stone-400">LOV3D</span>
<span class="absolute top-0 left-0 text-amber-700 dark:text-amber-500">LOV3D</span>
</a>
</div>
<div class="hidden md:flex flex-grow justify-center space-x-8 lg:space-x-12">
<a href="#" class="text-stone-700 hover:text-amber-700 dark:text-stone-300 dark:hover:text-amber-500 font-medium relative py-2 transition duration-300 ease-in-out group">
Home
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-amber-500 dark:bg-amber-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
</a>
<a href="#" class="text-stone-700 hover:text-amber-700 dark:text-stone-300 dark:hover:text-amber-500 font-medium relative py-2 transition duration-300 ease-in-out group">
Matches
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-amber-500 dark:bg-amber-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
</a>
<a href="#" class="text-stone-700 hover:text-amber-700 dark:text-stone-300 dark:hover:text-amber-500 font-medium relative py-2 transition duration-300 ease-in-out group">
Messages
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-amber-500 dark:bg-amber-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
</a>
<a href="#" class="text-stone-700 hover:text-amber-700 dark:text-stone-300 dark:hover:text-amber-500 font-medium relative py-2 transition duration-300 ease-in-out group">
Discover
<span class="absolute inset-x-0 bottom-0 h-0.5 bg-amber-500 dark:bg-amber-400 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
</a>
</div>
<div class="flex items-center space-x-4">
<div class="relative hidden sm:block">
<label for="search-input" class="sr-only">Search</label>
<input
type="text"
id="search-input"
placeholder="Search..."
class="pl-10 pr-4 py-2 rounded-full border border-stone-300 dark:border-stone-700 bg-stone-50 dark:bg-stone-700 text-stone-800 dark:text-stone-200 focus:outline-none focus:ring-2 focus:ring-amber-500 dark:focus:ring-amber-400 w-36 lg:w-48 transition-all duration-300 ease-in-out shadow-inner dark:shadow-none"
/>
<svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-stone-500 dark:text-stone-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
<div class="relative group">
<button type="button" class="flex text-sm rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-amber-400 dark:focus:ring-offset-stone-800">
<span class="sr-only">Open user menu</span>
<img class="h-10 w-10 rounded-full object-cover border-2 border-amber-500 dark:border-amber-400 shadow-md transform transition-transform duration-300 group-hover:scale-105" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User avatar">
<span class="absolute -bottom-1 -right-1 block h-3 w-3 rounded-full bg-green-500 border-2 border-stone-100 dark:border-stone-900"></span>
</button>
<!-- Dropdown for profile, settings (hidden by default, can be toggled with JS) -->
<!-- <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-lg shadow-lg py-1 bg-white dark:bg-stone-700 ring-1 ring-black ring-opacity-5 focus:outline-none"></div> -->
</div>
<!-- Mobile menu button -->
<div class="-mr-2 flex md:hidden">
<button type="button" class="bg-amber-600 dark:bg-amber-700 inline-flex items-center justify-center p-2 rounded-md text-stone-100 dark:text-stone-300 transition duration-150 ease-in-out hover:bg-amber-700 dark:hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-amber-500 dark:focus:ring-amber-400" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<!-- Icon when menu is closed. -->
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
</svg>
<!-- Icon when menu is open. -->
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
</svg>
</button>
</div>
</div>
</div>
</div>
<!-- Mobile menu, show/hide based on menu state. -->
<div class="md:hidden absolute w-full bg-gradient-to-b from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-800 shadow-lg pb-4 pt-2 -mt-1 transform transition-transform duration-300 ease-out scale-y-0 origin-top" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">Home</a>
<a href="#" class="text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">Matches</a>
<a href="#" class="text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">Messages</a>
<a href="#" class="text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 block px-3 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">Discover</a>
</div>
<div class="border-t border-stone-300 dark:border-stone-700 pt-4 pb-3">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full object-cover border-2 border-amber-500 dark:border-amber-400" src="https://randomuser.me/api/portraits/men/45.jpg" alt="User avatar">
</div>
<div class="ml-3">
<div class="text-base font-medium text-stone-800 dark:text-stone-200">John Doe</div>
<div class="text-sm font-medium text-stone-500 dark:text-stone-400">[email protected]</div>
</div>
</div>
<div class="mt-3 px-2 space-y-1">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 transition duration-150 ease-in-out">Your Profile</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 transition duration-150 ease-in-out">Settings</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-stone-700 hover:bg-stone-300 dark:text-stone-300 dark:hover:bg-stone-700 transition duration-150 ease-in-out">Sign out</a>
</div>
</div>
</div>
</nav>
<style>
/* This is a placeholder for JS-driven interactivity to toggle the mobile menu. */
/* For dynamic demo, you might add a class like 'mobile-menu-open' to 'nav' and manage its visibility. */
#mobile-menu {
transform: scaleY(0);
transform-origin: top;
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
opacity: 0;
pointer-events: none;
}
/* Example of how it would look when open with JS */
/* nav.mobile-menu-open #mobile-menu {
transform: scaleY(1);
opacity: 1;
pointer-events: auto;
} */
</style>Componenti correlati
Componente di navigazione Glassmorphism
Un componente di navigazione in stile glassmorphism per siti di e-commerce, con colori monocromatici, design reattivo e supporto per la modalità oscura utilizzando Tailwind CSS.
E-commerce Material Design Navigazione
Un componente di navigazione per l'e-commerce complesso, reattivo e monocromatico ispirato al Material Design, con ricerca, carrello, profilo utente e collegamenti di categoria con supporto per la modalità scura.
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.