野兽派痕迹导航
用于预订/预订系统的受野兽派启发的痕迹导航组件，具有高对比度、黑白和明亮的强调色，以及支持深色模式的完全响应能力。每个步骤都用粗体排版和独特的分隔符清晰地描绘出来。
HTML 代码
<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>