CCHub Logo CCHub Tailwind Collection
コンポーネント 目次 Table of Contents Component - 予約/予約

Table of Contents Component - 予約/予約

予約/予約システム用のシンプルでレスポンシブな目次コンポーネントで、グレースケールの色と微妙なグラデーションの切り替えが特徴です。ダークモードのサポートが含まれています。

プレビュー

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 コンポーネント

Skeuomorphism デザイン、パステルカラースキーム、ダークモードをサポートするレスポンシブ目次コンポーネントで、ポートフォリオに適しています。

開ける

目次コンポーネント - 3D アーストーン

ビジネスおよび企業のWebサイト向けの複雑な3Dにインスパイアされた目次コンポーネントで、アースカラーとダークモードのサポートによる完全な応答性を備えています。深みとエンゲージメントを提供するように設計されています。

開ける

目次

Microinteractionsデザイン、類似の配色、単純な複雑さ、およびソーシャルメディアの目的を備えた目次コンポーネント。ダークテーマのサポートによるレスポンシブ。JavaScript コードはありません。

開ける