Barre de navigation skeuomorphe
Composant de la barre de navigation du portfolio conçu avec des styles skeuomorphes et une palette de couleurs pastel, y compris la prise en charge du mode sombre. Il comporte des éléments interactifs tels que des liens et un menu déroulant.
HTML Code
<nav class="bg-white dark:bg-gray-800 shadow-lg p-4 rounded-lg flex items-center justify-between"> <div class="flex items-center space-x-4"> <img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full"> <span class="text-xl font-bold text-gray-800 dark:text-white">Portfolio</span> </div> <ul class="flex space-x-6"> <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">Home</a></li> <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">About</a></li> <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">Portfolio</a></li> <li><a href="#" class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200">Contact</a></li> </ul> <div class="relative"> <button class="text-gray-800 dark:text-white hover:text-pink-500 dark:hover:text-pink-400 transition ease-in-out duration-200 focus:outline-none"> Menu <span class="inline-flex items-center justify-center w-3 h-3 bg-gray-800 dark:bg-white rounded-full"></span> </button> <ul class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-700 rounded-lg shadow-lg hidden" id="dropdown-menu"> <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-200">Profile</a></li> <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-200">Settings</a></li> <li><a href="#" class="block px-4 py-2 text-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-600 transition ease-in-out duration-200">Logout</a></li> </ul> </div> <button class="hidden md:block text-gray-800 dark:text-white border border-gray-400 dark:border-gray-600 rounded-lg px-4 py-2 hover:bg-pink-500 dark:hover:bg-pink-400 transition ease-in-out duration-200">Get Started</button></nav>Composants associés
Barre de navigation minimaliste
Un composant de barre de navigation réactif conçu dans un style minimaliste, prenant en charge le thème sombre et utilisant Tailwind CSS.
Glassmorphism Barre de navigation du tableau de bord
Barre de navigation du tableau de bord complexe monochromatique Glassmorphism avec CSS Tailwind, prise en charge du thème réactif et sombre.
Barre de navigation du portefeuille
Une barre de navigation réactive avec prise en charge du thème sombre, conçue pour un site Web de portfolio utilisant les principes de conception matérielle et la palette de couleurs des tons de terre. Il comprend un logo de marque, des liens de navigation et un bouton d’appel à l’action. Le design est modérément complexe et s’adapte aux différentes tailles d’écran.