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
Earth_Tones_Gradient_Breadcrumb_Navigation
Un composant de navigation complexe et réactif conçu pour les sites Web d’actualités et de journalisme, avec des transitions de dégradé terreux et une prise en charge complète du mode sombre.
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 réactif conçu dans le style Neumorphism, prenant en charge le mode sombre, créé à l’aide de Tailwind CSS.