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.
HTML Code
<nav class="bg-white px-4 py-3 border-b-4 border-black font-mono dark:bg-black dark:border-white sm:px-6 lg:px-8" aria-label="Breadcrumb">
<ol role="list" class="flex flex-wrap items-center space-x-0.5 sm:space-x-1.5">
<li class="flex items-center group">
<a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 pr-1 dark:text-white dark:hover:text-red-500">
Booking
</a>
<span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
</li>
<li class="flex items-center group">
<a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 px-1 dark:text-white dark:hover:text-red-500">
Select Service
</a>
<span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
</li>
<li class="flex items-center group">
<a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 px-1 dark:text-white dark:hover:text-red-500">
Choose Date & Time
</a>
<span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
</li>
<li class="flex items-center group">
<a href="#" class="text-black uppercase text-sm font-extrabold tracking-widest hover:text-red-500 px-1 dark:text-white dark:hover:text-red-500">
Confirm Details
</a>
<span class="hidden sm:block text-2xl text-black select-none dark:text-white">/</span>
</li>
<li class="flex items-center">
<span class="text-red-500 uppercase text-sm font-extrabold tracking-widest px-1 dark:text-red-500" aria-current="page">
Payment
</span>
</li>
</ol>
</nav>Composants associés
Composant de navigation du fil d’Ariane
Un composant de navigation CSS Tailwind avec prise en charge du mode sombre.
Composant de navigation du fil d’Ariane
Un composant de navigation Breadcrumb réactif conçu avec le style Neumorphism à l’aide de Tailwind CSS, avec prise en charge du thème sombre.
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.