CCHub Logo CCHub Tailwind Collection
구성 요소 이동 경로 탐색 브루탈리스트 이동 경로 탐색

브루탈리스트 이동 경로 탐색

예약/예약 시스템을 위한 브루탈리즘에서 영감을 받은 이동 경로 탐색 구성 요소로, 고대비, 밝은 액센트 색상의 흑백, 다크 모드 지원으로 완전한 응답성을 제공합니다. 각 단계는 대담한 타이포그래피와 고유한 구분 기호로 명확하게 묘사됩니다.

미리 보기

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>

관련 구성 요소

Breadcrumb Navigation 구성 요소

다크 모드를 지원하는 Tailwind CSS 이동 경로 탐색 구성 요소.

열다

Breadcrumb Navigation 구성 요소

머티리얼 디자인에서 영감을 받은 이동 경로 탐색 구성 요소(Breadcrumb Navigation Component)는 그레이스케일 색 구성표와 복잡한 상호 작용을 사용하여 대시보드에 사용되며, 응답성 및 어두운 테마 지원을 위해 Tailwind CSS로 구현됩니다.

열다

Breadcrumb Navigation 구성 요소

Glassmorphism 스타일과 어스 톤 색상으로 설계된 반응형 이동 경로 탐색 구성 요소는 전문 회사 웹 사이트에 적합합니다. 어두운 테마를 지원하며 탐색을 위한 대화형 기능이 포함되어 있습니다.

열다