Industrial_Monochromatic_Navigation
Il s’agit d’un composant de navigation complexe, axé sur le mode sombre, pour les entreprises industrielles et manufacturières, doté d’un design monochrome et de plusieurs éléments interactifs adaptés aux tableaux de bord et aux interfaces opérationnelles.
HTML Code
<header class="bg-gray-950 dark:bg-gray-950 text-gray-200 dark:text-gray-200 shadow-md sticky top-0 z-50">
<nav class="container mx-auto px-4 py-3 flex items-center justify-between flex-wrap md:flex-nowrap">
<!-- Logo & Brand Name -->
<div class="flex items-center flex-shrink-0 mr-6 mb-4 md:mb-0">
<svg class="h-8 w-8 mr-2 text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M9.504 1.134A1 1 0 0110 1h.496a1 1 0 01.496.504l.056.112.013.025.132.265.131.264.496.992.352.704.056.112.013.025.132.265.131.264.496.992.352.704a1 1 0 010 .984l-.352.704-.496.992-.131.264-.132.265-.013.025-.056.112-.352.704-.496.992-.131.264-.132.265-.013.025-.056.112a1 1 0 01-1.992 0l-.056-.112-.013-.025-.132-.265-.131-.264-.496-.992-.352-.704-.056-.112-.013-.025-.132-.265-.131-.264-.496-.992-.352-.704a1 1 0 010-.984l.352-.704.496-.992.131-.264.132-.265.013-.025.056-.112.352-.704.496-.992.131-.264.132-.265.013.025.056.112A1 1 0 019.504 1.134zM9.01 4.509a1 1 0 00-1.98 0l-.055.11-.013.027c-.122.247-.245.495-.367.742l-.244.492a1 1 0 000 .991l.244.492c.122.247.245.495.367.742l.013.027.055.11a1 1 0 001.98 0l.055-.11.013-.027c.122-.247.245-.495.367-.742l.244-.492a1 1 0 000-.991l-.244-.492c-.122-.247-.245-.495-.367-.742l-.013-.027-.055-.11zm-.056-.226l.013-.026.059-.119.006-.012.006-.012.013-.026.059-.119.006-.012.006-.012.013-.026.059-.119.006-.012.006-.012.013-.026.059-.119.006-.012.006-.012.013-.026a1 1 0 011.98 0l.013.026.059.119.006.012.006.012.013.026.059.119.006.012.006.012.013.026.059.119.006.012.006.012.013.026a1 1 0 01-1.98 0l-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026a1 1 0 01-1.98 0l-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026a1 1 0 01-1.98 0l-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026-.059-.119-.006-.012-.006-.012-.013-.026a1 1 0 01-1.98 0l-.013-.026-.059-.119c-.046-.093-.09-.187-.134-.281zm.056.226z" clip-rule="evenodd" />
</svg>
<span class="font-semibold text-xl tracking-tight text-blue-400 dark:text-blue-400">InnoManufac</span>
</div>
<!-- Mobile Menu Toggle -->
<div class="block md:hidden mb-4 md:mb-0">
<button class="navbar-toggler flex items-center px-3 py-2 border rounded text-gray-400 border-gray-600 hover:text-white hover:border-white"
onclick="document.getElementById('mobile-menu').classList.toggle('hidden'); document.getElementById('mobile-menu').classList.toggle('flex');">
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</button>
</div>
<!-- Main Navigation Links (Desktop & Mobile) -->
<div id="mobile-menu" class="w-full flex-grow hidden md:flex md:items-center md:w-auto mt-4 md:mt-0 flex-col md:flex-row">
<div class="text-sm md:flex-grow flex flex-col md:flex-row items-center">
<a href="#dashboard" class="block mt-4 md:inline-block md:mt-0 text-gray-300 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-400 mr-6 py-2 px-3 rounded-md transition duration-300 ease-in-out bg-gray-800 md:bg-transparent dark:bg-gray-800 dark:md:bg-transparent mb-2 md:mb-0">
Dashboard
</a>
<a href="#operations" class="block mt-4 md:inline-block md:mt-0 text-gray-300 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-400 mr-6 py-2 px-3 rounded-md transition duration-300 ease-in-out bg-gray-800 md:bg-transparent dark:bg-gray-800 dark:md:bg-transparent mb-2 md:mb-0">
Operations
</a>
<a href="#analytics" class="block mt-4 md:inline-block md:mt-0 text-gray-300 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-400 mr-6 py-2 px-3 rounded-md transition duration-300 ease-in-out bg-gray-800 md:bg-transparent dark:bg-gray-800 dark:md:bg-transparent mb-2 md:mb-0">
Analytics
</a>
<a href="#maintenance" class="block mt-4 md:inline-block md:mt-0 text-gray-300 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-400 mr-6 py-2 px-3 rounded-md transition duration-300 ease-in-out bg-gray-800 md:bg-transparent dark:bg-gray-800 dark:md:bg-transparent mb-2 md:mb-0">
Maintenance
</a>
<a href="#inventory" class="block mt-4 md:inline-block md:mt-0 text-gray-300 dark:text-gray-300 hover:text-blue-400 dark:hover:text-blue-400 py-2 px-3 rounded-md transition duration-300 ease-in-out bg-gray-800 md:bg-transparent dark:bg-gray-800 dark:md:bg-transparent mb-2 md:mb-0">
Inventory
</a>
</div>
<!-- Search & User Profile -->
<div class="flex items-center flex-col md:flex-row">
<div class="relative mb-4 md:mb-0 md:mr-4 w-full md:w-auto">
<input type="search" placeholder="Search anything..." class="bg-gray-800 dark:bg-gray-800 text-gray-300 dark:text-gray-300 rounded-md py-2 pl-10 pr-4 block w-full leading-normal placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition duration-300 ease-in-out">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-gray-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
</svg>
</div>
</div>
<div class="flex items-center space-x-4">
<!-- Notifications Dropdown (example) -->
<div class="relative group">
<button class="text-gray-400 dark:text-gray-400 hover:text-white dark:hover:text-white p-2 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition duration-300">
<svg class="h-6 w-6" 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 0a3 3 0 11-6 0m6 0v1h-6v-1m6 0H9"/></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">3</span>
</button>
<div class="absolute right-0 mt-2 w-72 bg-gray-800 dark:bg-gray-800 rounded-md shadow-lg py-1 z-20 hidden group-hover:block transition-opacity duration-300 ease-in-out opacity-0 group-hover:opacity-100">
<a href="#" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 leading-tight">New sensor data critical anomaly</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 leading-tight border-t border-gray-700 dark:border-gray-700">Maintenance scheduled for Line 3</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700 leading-tight border-t border-gray-700 dark:border-gray-700">Daily production report available</a>
</div>
</div>
<!-- User Profile Dropdown -->
<div class="relative group">
<button class="block w-10 h-10 rounded-full overflow-hidden border-2 border-gray-600 dark:border-gray-600 hover:border-blue-400 dark:hover:border-blue-400 transition duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<img class="w-full h-full object-cover" src="https://randomuser.me/api/portraits/men/86.jpg" alt="User Avatar">
</button>
<div class="absolute right-0 mt-2 w-48 bg-gray-800 dark:bg-gray-800 rounded-md shadow-lg py-1 z-20 hidden group-hover:block transition-opacity duration-300 ease-in-out opacity-0 group-hover:opacity-100">
<a href="#" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700">Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-300 dark:text-gray-300 hover:bg-gray-700 dark:hover:bg-gray-700">Settings</a>
<a href="#" class="block px-4 py-2 text-sm text-red-400 dark:text-red-400 hover:bg-gray-700 dark:hover:bg-gray-700 border-t border-gray-700 dark:border-gray-700 mt-1 pt-2">Sign out</a>
</div>
</div>
</div>
</div>
</div>
</nav>
</header>Composants associés
Navigation de la carte des nouvelles de l’agriculture
Un composant de navigation simple, inspiré du papier/de l’impression, comprenant une carte d’actualités pour l’agriculture et les sites Web agricoles, utilisant une palette de couleurs analogue. Il est entièrement réactif avec la prise en charge du mode sombre.
Composant d’amélioration de la navigation
Un composant de navigation réactif conçu dans le style Material Design à l’aide de Tailwind CSS, avec prise en charge du thème sombre et des effets réactifs.
Composants d’amélioration de la navigation
Un composant de navigation conçu avec le skeuomorphisme, avec des éléments numériques qui imitent leurs homologues du monde réel. Il est stylisé à l’aide de Tailwind CSS avec des effets réactifs et la prise en charge du thème sombre.