Composant de navigation ludique
Un composant de navigation ludique et attrayant conçu pour les plateformes éducatives, avec des couleurs vives, des éléments arrondis et un contraste élevé pour une lisibilité facile. Il prend en charge le mode sombre et est entièrement réactif.
HTML Code
<nav class="flex justify-center px-4 py-3 bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 shadow-xl rounded-b-3xl dark:from-gray-800 dark:via-gray-900 dark:to-black sm:px-6 md:px-8 lg:px-10 xl:px-12" aria-label="Breadcrumb">
<ol class="flex flex-wrap items-center space-x-2 sm:space-x-4">
<li>
<a href="#" class="flex items-center text-white hover:text-yellow-200 transition-colors duration-300 transform hover:scale-105 active:scale-95 ease-in-out dark:text-gray-300 dark:hover:text-amber-300">
<svg class="w-5 h-5 mr-1 sm:mr-2 flex-shrink-0" 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>
<span class="font-semibold text-sm sm:text-base">Home</span>
</a>
</li>
<li>
<div class="flex items-center">
<svg class="w-4 h-4 sm:w-5 sm:h-5 text-yellow-300 dark:text-gray-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
<a href="#" class="ml-1 sm:ml-2 text-white hover:text-yellow-200 transition-colors duration-300 transform hover:scale-105 active:scale-95 ease-in-out dark:text-gray-300 dark:hover:text-amber-300">
<span class="font-medium text-sm sm:text-base">Courses</span>
</a>
</div>
</li>
<li>
<div class="flex items-center">
<svg class="w-4 h-4 sm:w-5 sm:h-5 text-yellow-300 dark:text-gray-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
<a href="#" class="ml-1 sm:ml-2 text-white hover:text-yellow-200 transition-colors duration-300 transform hover:scale-105 active:scale-95 ease-in-out dark:text-gray-300 dark:hover:text-amber-300">
<span class="font-medium text-sm sm:text-base">Web Development</span>
</a>
</div>
</li>
<li aria-current="page">
<div class="flex items-center">
<svg class="w-4 h-4 sm:w-5 sm:h-5 text-yellow-300 dark:text-gray-500 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
</svg>
<span class="ml-1 sm:ml-2 text-yellow-100 font-bold drop-shadow-lg text-sm sm:text-base dark:text-orange-400">
Mastering Tailwind CSS
</span>
</div>
</li>
</ol>
</nav>Composants associés
Composant de navigation du fil d’Ariane
Composant de navigation Breadcrumb avec conception Skeuomorphism, effets réactifs et prise en charge du thème sombre.
Composant de navigation du fil d’Ariane
Un composant de navigation complexe et monochromatique conçu pour les portefeuilles, doté d’une interface utilisateur en mode sombre et d’une réactivité totale.
Navigation brutaliste
Un composant de navigation d’inspiration brutaliste pour les systèmes de réservation, avec un contraste élevé, en noir et blanc avec une couleur d’accent vive, et une réactivité totale avec la prise en charge du mode sombre. Chaque étape est clairement délimitée par une typographie audacieuse et un séparateur unique.