CCHub Logo CCHub Tailwind Collection
구성 요소 이동 경로 탐색 Playful Breadcrumb Navigation 구성 요소

Playful Breadcrumb Navigation 구성 요소

교육용 플랫폼용으로 설계된 재미있고 매력적인 이동 경로 탐색 구성 요소로, 밝은 색상, 둥근 요소, 높은 대비로 쉽게 읽을 수 있습니다. 다크 모드를 지원하며 완벽하게 반응합니다.

미리 보기

HTML 코드 

<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>

관련 구성 요소

Breadcrumb Navigation 구성 요소

glassmorphism 디자인 스타일과 함께 Tailwind CSS를 사용하는 반응형 이동 경로 탐색 구성 요소입니다. 흐릿한 유리 같은 배경이 특징이며, 어두운 테마를 지원하고, 자리 표시자 이미지를 포함합니다.

열다

Breadcrumb Navigation 구성 요소

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

열다

Retro_Vintage_Corporate_Blue_Breadcrumb_Navigation

레트로/빈티지 미학을 가미한 간단하고 반응이 빠른 이동 경로 탐색 구성 요소로, 기업용 블루 톤을 사용하며 교육 플랫폼용으로 설계되었습니다. 다크 모드 지원이 포함됩니다.

열다