Nature-Inspired_Entertainment_Navigation
Un composant de navigation complexe, inspiré de la nature, pour les plateformes de divertissement et de médias, avec des lignes fluides et des combinaisons de couleurs sucrées. Entièrement réactif avec prise en charge du mode sombre.
HTML Code
<nav class="relative bg-gradient-to-br from-purple-200 via-pink-200 to-green-100 dark:from-gray-900 dark:via-purple-950 dark:to-green-950 shadow-lg dark:shadow-xl rounded-b-3xl md:rounded-b-[4rem] overflow-hidden p-4 md:p-6 lg:p-8 transform -skew-y-1 perspective-1000">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/natural-paper.png')] opacity-10 dark:opacity-5 mix-blend-multiply dark:mix-blend-screen -skew-y-1"></div>
<div class="relative flex flex-col md:flex-row items-center justify-between mx-auto max-w-7xl skew-y-1">
<!-- Logo/Brand Section -->
<div class="flex items-center space-x-2 mb-4 md:mb-0">
<svg class="h-10 w-10 text-pink-600 dark:text-purple-400 transform rotate-45 -translate-y-1" 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="M7 4v16M17 4v16M3 8h4m-4 8h4m10-8h4m-4 8h4M7 8a4 4 0 100 8h10a4 4 0 100-8H7zm0 0l-4-4m4 4l-4 4m10 0l4-4m-4 4l4 4"></path>
</svg>
<a href="#" class="font-extrabold text-3xl text-purple-700 dark:text-pink-300 font-serif tracking-tight drop-shadow-md dark:drop-shadow-lg">WAVEFLIX</a>
</div>
<!-- Mobile Menu Button -->
<div class="md:hidden">
<button class="text-purple-700 dark:text-pink-300 hover:text-pink-600 dark:hover:text-purple-400 focus:outline-none focus:ring-2 focus:ring-pink-400 rounded-md p-2 transition duration-300 ease-in-out" aria-label="Toggle navigation menu">
<svg class="h-8 w-8" 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="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
<!-- Main Navigation Links -->
<div class="hidden md:flex flex-grow justify-center space-x-8 lg:space-x-12 mt-4 md:mt-0">
<a href="#" class="relative text-lg font-semibold text-purple-800 dark:text-pink-200 hover:text-pink-600 dark:hover:text-purple-400 transition-colors duration-300 pb-1 group">
<span class="relative z-10">Home</span>
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-500 dark:bg-purple-300 transform scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100 rounded-full"></span>
</a>
<a href="#" class="relative text-lg font-semibold text-purple-800 dark:text-pink-200 hover:text-pink-600 dark:hover:text-purple-400 transition-colors duration-300 pb-1 group">
<span class="relative z-10">Movies</span>
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-500 dark:bg-purple-300 transform scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100 rounded-full"></span>
</a>
<a href="#" class="relative text-lg font-semibold text-purple-800 dark:text-pink-200 hover:text-pink-600 dark:hover:text-purple-400 transition-colors duration-300 pb-1 group">
<span class="relative z-10">Series</span>
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-500 dark:bg-purple-300 transform scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100 rounded-full"></span>
</a>
<a href="#" class="relative text-lg font-semibold text-purple-800 dark:text-pink-200 hover:text-pink-600 dark:hover:text-purple-400 transition-colors duration-300 pb-1 group">
<span class="relative z-10">Live</span>
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-500 dark:bg-purple-300 transform scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100 rounded-full"></span>
</a>
<a href="#" class="relative text-lg font-semibold text-purple-800 dark:text-pink-200 hover:text-pink-600 dark:hover:text-purple-400 transition-colors duration-300 pb-1 group">
<span class="relative z-10">Categories</span>
<span class="absolute bottom-0 left-0 w-full h-0.5 bg-pink-500 dark:bg-purple-300 transform scale-x-0 origin-left transition-transform duration-300 group-hover:scale-x-100 rounded-full"></span>
</a>
</div>
<!-- Search and User Profile -->
<div class="hidden md:flex items-center space-x-4 lg:space-x-6 mt-4 md:mt-0">
<div class="relative">
<input type="text" placeholder="Search..." class="py-2 pl-10 pr-4 rounded-full bg-white/70 dark:bg-gray-800/70 border border-transparent focus:border-pink-400 focus:ring-2 focus:ring-pink-200 dark:focus:border-purple-600 dark:focus:ring-2 dark:focus:ring-purple-900 text-purple-900 dark:text-pink-100 placeholder-purple-500 dark:placeholder-pink-400 transition duration-300 ease-in-out shadow-sm dark:shadow-md backdrop-blur-sm">
<svg class="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-purple-500 dark:text-pink-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>
<button class="relative flex items-center justify-center p-2 rounded-full bg-pink-400/80 dark:bg-purple-600/80 hover:bg-pink-500 hover:dark:bg-purple-700 transition duration-300 ease-in-out shadow-md dark:shadow-lg focus:outline-none focus:ring-2 focus:ring-pink-300 dark:focus:ring-purple-500">
<svg class="h-6 w-6 text-white dark:text-pink-100" 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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
</svg>
<span class="absolute top-0 right-0 inline-flex items-center justify-center px-2 py-1 text-xs font-bold leading-none text-red-100 bg-red-600 rounded-full transform translate-x-1/2 -translate-y-1/2">3</span>
</button>
<a href="#" class="block relative w-10 h-10 rounded-full overflow-hidden border-2 border-pink-400 dark:border-purple-500 transform transition duration-300 ease-in-out hover:scale-110 shadow-md">
<img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Profile">
<span class="absolute bottom-0 right-0 h-3 w-3 bg-green-500 rounded-full border-2 border-white dark:border-gray-900"></span>
</a>
</div>
</div>
</nav>Composants associés
Composants d’amélioration de la navigation
Un composant d’amélioration de la navigation réactif pour un blog en mode sombre avec des couleurs vives et des fonctionnalités de complexité modérée.
Luxury_Vibrant_Travel_Navigation
Un composant de navigation complexe, luxueux et dynamique conçu pour les sites Web de voyage et de tourisme, avec une typographie sophistiquée, des couleurs à haute saturation et une réactivité totale avec prise en charge du mode sombre.
E-commerce Navigation industrielle
Un composant complexe de navigation e-commerce de style industriel avec des matériaux bruts et des éléments apparents esthétiques. Dispose d’un schéma monochrome en noir et blanc avec un accent brillant, entièrement réactif avec prise en charge du mode sombre.