CCHub Logo CCHub Tailwind Collection
구성 요소 목차 Table of Contents 구성 요소 - 예약/예약

Table of Contents 구성 요소 - 예약/예약

예약/예약 시스템을 위한 간단하고 반응이 빠른 Table of Contents 구성 요소로, 회색조 색상과 미묘한 그라데이션 전환을 특징으로 합니다. 다크 모드 지원이 포함됩니다.

미리 보기

HTML 코드 

<div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="relative p-6 sm:p-8 bg-gradient-to-r from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-extrabold text-gray-900 dark:text-white mb-2 leading-tight">
        Your Reservation Guide
      </h2>
      <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300">
        Navigate through your booking steps.
      </p>
      <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10 pointer-events-none rounded-lg" style="background-image: linear-gradient(135deg, #e0e0e0 0%, #ffffff 100%); dark-background-image: linear-gradient(135deg, #333333 0%, #1a1a1a 100%);"></div>
    </div>
    <nav aria-label="Booking Navigation" class="p-4 sm:p-6 space-y-4">
      <a href="#step-1" class="flex items-center p-3 sm:p-4 rounded-lg group transition-all duration-300 ease-in-out bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
        <span class="flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-lg sm:text-xl font-bold bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-100 group-hover:bg-gray-300 dark:group-hover:bg-gray-500 transition-colors duration-300">
          1
        </span>
        <div class="ml-4 flex-grow">
          <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">
            Select Service
          </h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">Choose your desired service or treatment.</p>
        </div>
        <svg class="w-5 h-5 ml-auto text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </a>

      <a href="#step-2" class="flex items-center p-3 sm:p-4 rounded-lg group transition-all duration-300 ease-in-out bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
        <span class="flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-lg sm:text-xl font-bold bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-100 group-hover:bg-gray-300 dark:group-hover:bg-gray-500 transition-colors duration-300">
          2
        </span>
        <div class="ml-4 flex-grow">
          <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">
            Pick Date & Time
          </h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">Find available slots that suit your schedule.</p>
        </div>
        <svg class="w-5 h-5 ml-auto text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </a>

      <a href="#step-3" class="flex items-center p-3 sm:p-4 rounded-lg group transition-all duration-300 ease-in-out bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
        <span class="flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-lg sm:text-xl font-bold bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-100 group-hover:bg-gray-300 dark:group-hover:bg-gray-500 transition-colors duration-300">
          3
        </span>
        <div class="ml-4 flex-grow">
          <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">
            Your Details
          </h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">Provide contact and preference information.</p>
        </div>
        <svg class="w-5 h-5 ml-auto text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </a>

      <a href="#step-4" class="flex items-center p-3 sm:p-4 rounded-lg group transition-all duration-300 ease-in-out bg-gray-50 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 border border-gray-200 dark:border-gray-700 dark:hover:border-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600">
        <span class="flex-shrink-0 w-8 h-8 sm:w-10 sm:h-10 rounded-full flex items-center justify-center text-lg sm:text-xl font-bold bg-gray-200 text-gray-700 dark:bg-gray-600 dark:text-gray-100 group-hover:bg-gray-300 dark:group-hover:bg-gray-500 transition-colors duration-300">
          4
        </span>
        <div class="ml-4 flex-grow">
          <h3 class="text-base sm:text-lg font-semibold text-gray-800 dark:text-gray-100 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">
            Confirm Booking
          </h3>
          <p class="text-sm text-gray-500 dark:text-gray-400">Review your reservation details and complete.</p>
        </div>
        <svg class="w-5 h-5 ml-auto text-gray-400 dark:text-gray-500 group-hover:text-gray-600 dark:group-hover:text-gray-300 transition-colors duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </a>
    </nav>
  </div>
</div>

관련 구성 요소

Table of Contents 구성 요소

네온/글로우 효과와 가을 색 구성표가 있는 간단하고 반응이 빠른 목차 구성 요소로, 다크 모드 지원을 포함하여 사진 포트폴리오 또는 갤러리에 적합합니다.

열다

Table of Contents 구성 요소

머티리얼 디자인에서 생생한 색상으로 스타일링된 반응형 목차 구성요소로, 다크 모드 지원 및 여러 대화형 요소를 포함하여 블로그 및 콘텐츠 소비에 적합합니다.

열다

Table of Contents 컴포넌트 - 3D Earth Tones

비즈니스 및 기업 웹 사이트를 위한 복잡한 3D에서 영감을 받은 목차 구성 요소로, 어스 톤과 다크 모드 지원으로 완전한 응답성을 제공합니다. 깊이와 몰입도를 제공하도록 설계되었습니다.

열다