CCHub Logo CCHub Tailwind Collection
구성 요소 목차 Monospace_Developer_TOC

Monospace_Developer_TOC

monospace/developer 미학, 보석 색조 색 구성표, 문서 및 기술 자료 사이트에 최적화된 복잡하고 반응이 빠른 Table of Contents 구성 요소로, 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="font-mono bg-stone-50 text-gray-800 dark:bg-stone-900 dark:text-gray-100 p-4 sm:p-6 lg:p-8 rounded-lg shadow-xl border border-stone-200 dark:border-stone-800 transition-colors duration-300">
  <h2 class="text-xl sm:text-2xl font-bold mb-4 border-b-2 border-emerald-600 pb-2 text-emerald-700 dark:text-emerald-500 flex items-center">
    <svg class="w-6 h-6 mr-2 text-emerald-500" 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 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
    </svg>
    Table of Contents
  </h2>
  <nav class="">
    <ul class="space-y-2 text-sm sm:text-base">
      <li class="group">
        <a href="#section-1" class="flex items-center text-emerald-700 dark:text-emerald-500 hover:text-emerald-500 dark:hover:text-emerald-300 transition-colors duration-200 py-1.5 px-2 -ml-2 rounded-md hover:bg-emerald-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
          <span class="block w-2 h-2 rounded-full bg-emerald-600 mr-3 animate-pulse group-hover:animate-none group-hover:scale-125 transition-transform"></span>
          <span class="font-semibold">1. Introduction to Project Atlas</span>
        </a>
        <ul class="ml-6 mt-1 space-y-1 text-gray-700 dark:text-gray-300 border-l border-emerald-400 dark:border-emerald-700 pl-4">
          <li><a href="#section-1-1" class="block py-1.5 hover:text-ruby-700 dark:hover:text-ruby-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-emerald-500">1.1. Overview and Goals</a></li>
          <li><a href="#section-1-2" class="block py-1.5 hover:text-ruby-700 dark:hover:text-ruby-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-emerald-500">1.2. Key Features</a></li>
        </ul>
      </li>
      <li class="group">
        <a href="#section-2" class="flex items-center text-sapphire-700 dark:text-sapphire-500 hover:text-sapphire-500 dark:hover:text-sapphire-300 transition-colors duration-200 py-1.5 px-2 -ml-2 rounded-md hover:bg-sapphire-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-sapphire-500 focus:ring-opacity-50">
          <span class="block w-2 h-2 rounded-full bg-sapphire-600 mr-3 animate-pulse group-hover:animate-none group-hover:scale-125 transition-transform"></span>
          <span class="font-semibold">2. Getting Started</span>
        </a>
        <ul class="ml-6 mt-1 space-y-1 text-gray-700 dark:text-gray-300 border-l border-sapphire-400 dark:border-sapphire-700 pl-4">
          <li><a href="#section-2-1" class="block py-1.5 hover:text-ruby-700 dark:hover:text-ruby-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-sapphire-500">2.1. Installation Guide</a></li>
          <li><a href="#section-2-2" class="block py-1.5 hover:text-ruby-700 dark:hover:text-ruby-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-sapphire-500">2.2. Configuration Settings</a></li>
          <li><a href="#section-2-3" class="block py-1.5 hover:text-ruby-700 dark:hover:text-ruby-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-sapphire-500">2.3. Running Your First Query</a></li>
        </ul>
      </li>
      <li class="group">
        <a href="#section-3" class="flex items-center text-ruby-700 dark:text-ruby-500 hover:text-ruby-500 dark:hover:text-ruby-300 transition-colors duration-200 py-1.5 px-2 -ml-2 rounded-md hover:bg-ruby-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-ruby-500 focus:ring-opacity-50">
          <span class="block w-2 h-2 rounded-full bg-ruby-600 mr-3 animate-pulse group-hover:animate-none group-hover:scale-125 transition-transform"></span>
          <span class="font-semibold">3. Advanced Topics</span>
        </a>
        <ul class="ml-6 mt-1 space-y-1 text-gray-700 dark:text-gray-300 border-l border-ruby-400 dark:border-ruby-700 pl-4">
          <li><a href="#section-3-1" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-ruby-500">3.1. API Reference</a></li>
          <li><a href="#section-3-2" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-ruby-500">3.2. Performance Optimization</a></li>
          <li><a href="#section-3-3" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-ruby-500">3.3. Extending Functionality</a></li>
          <li><a href="#section-3-4" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-ruby-500">3.4. Troubleshooting Common Issues</a></li>
        </ul>
      </li>
      <li class="group">
        <a href="#section-4" class="flex items-center text-purple-700 dark:text-purple-500 hover:text-purple-500 dark:hover:text-purple-300 transition-colors duration-200 py-1.5 px-2 -ml-2 rounded-md hover:bg-purple-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50">
          <span class="block w-2 h-2 rounded-full bg-purple-600 mr-3 animate-pulse group-hover:animate-none group-hover:scale-125 transition-transform"></span>
          <span class="font-semibold">4. Contributing</span>
        </a>
        <ul class="ml-6 mt-1 space-y-1 text-gray-700 dark:text-gray-300 border-l border-purple-400 dark:border-purple-700 pl-4">
          <li><a href="#section-4-1" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-purple-500">4.1. How to Submit a Pull Request</a></li>
          <li><a href="#section-4-2" class="block py-1.5 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50 relative before:content-['>'] before:absolute before:-left-4 before:text-purple-500">4.2. Code of Conduct</a></li>
        </ul>
      </li>
      <li class="group">
        <a href="#section-5" class="flex items-center text-teal-700 dark:text-teal-500 hover:text-teal-500 dark:hover:text-teal-300 transition-colors duration-200 py-1.5 px-2 -ml-2 rounded-md hover:bg-purple-100 dark:hover:bg-stone-800 focus:outline-none focus:ring-2 focus:ring-teal-500 focus:ring-opacity-50">
          <span class="block w-2 h-2 rounded-full bg-teal-600 mr-3 animate-pulse group-hover:animate-none group-hover:scale-125 transition-transform"></span>
          <span class="font-semibold">5. Legal & Licensing</span>
        </a>
      </li>
    </ul>
  </nav>
  <div class="mt-6 pt-4 border-t-2 border-slate-300 dark:border-slate-700 text-xs text-gray-500 dark:text-gray-400 flex items-center justify-between">
    <span>Documentation Version: <span class="text-emerald-600 dark:text-emerald-400">1.0.3</span></span>
    <a href="#top" class="inline-flex items-center hover:text-gray-700 dark:hover:text-gray-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">
      <svg class="w-4 h-4 mr-1" 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="M5 10l7-7m0 0l7 7m-7-7v18"></path>
      </svg>
      Back to Top
    </a>
  </div>
</div>

<style>
  /* Custom Tailwind colors for jewel tones */
  .text-emerald-700 { color: #047857; } /* green-700 */
  .text-emerald-500 { color: #10B981; } /* green-500 */
  .text-emerald-300 { color: #6EE7B7; } /* green-300 */
  .bg-emerald-600 { background-color: #059669; }
  .border-emerald-600 { border-color: #059669; }
  .border-emerald-400 { border-color: #34D399; }
  .hover\:bg-emerald-100:hover { background-color: #D1FAE5; }
  .focus\:ring-emerald-500:focus { --tw-ring-color: #10B981; }

  .text-sapphire-700 { color: #1D4ED8; } /* blue-700 */
  .text-sapphire-500 { color: #3B82F6; } /* blue-500 */
  .text-sapphire-300 { color: #93C5FD; } /* blue-300 */
  .bg-sapphire-600 { background-color: #2563EB; }
  .border-sapphire-400 { border-color: #60A5FA; }
  .hover\:bg-sapphire-100:hover { background-color: #DBEAFE; }
  .focus\:ring-sapphire-500:focus { --tw-ring-color: #3B82F6; }

  .text-ruby-700 { color: #B91C1C; } /* red-700 */
  .text-ruby-500 { color: #EF4444; } /* red-500 */
  .text-ruby-300 { color: #FCA5A5; } /* red-300 */
  .bg-ruby-600 { background-color: #DC2626; }
  .border-ruby-400 { border-color: #F87171; }
  .hover\:bg-ruby-100:hover { background-color: #FEE2E2; }
  .focus\:ring-ruby-500:focus { --tw-ring-color: #EF4444; }

  .text-purple-700 { color: #6D28D9; } /* violet-700 */
  .text-purple-500 { color: #8B5CF6; } /* violet-500 */
  .text-purple-300 { color: #C4B5FD; } /* violet-300 */
  .bg-purple-600 { background-color: #7C3AED; }
  .border-purple-400 { border-color: #A78BFA; }
  .hover\:bg-purple-100:hover { background-color: #EDE9FE; }
  .focus\:ring-purple-500:focus { --tw-ring-color: #8B5CF6; }

  .text-teal-700 { color: #0F766E; } /* teal-700 */
  .text-teal-500 { color: #14B8A6; } /* teal-500 */
  .text-teal-300 { color: #5EEAD4; } /* teal-300 */
  .bg-teal-600 { background-color: #0D9488; }
  .border-teal-400 { border-color: #2DD4BF; }

  /* Dark mode custom colors adjustments (optional, but good for fine-tuning) */
  .dark\:text-emerald-500 { color: #10B981; }
  .dark\:text-emerald-300 { color: #6EE7B7; }
  .dark\:border-emerald-700 { border-color: #047857; }
  .dark\:hover\:bg-stone-800:hover { background-color: #292524; }

  .dark\:text-sapphire-500 { color: #3B82F6; }
  .dark\:text-sapphire-300 { color: #93C5FD; }
  .dark\:border-sapphire-700 { border-color: #1D4ED8; }

  .dark\:text-ruby-500 { color: #EF4444; }
  .dark\:text-ruby-300 { color: #FCA5A5; }
  .dark\:border-ruby-700 { border-color: #B91C1C; }

  .dark\:text-purple-500 { color: #8B5CF6; }
  .dark\:text-purple-300 { color: #C4B5FD; }
  .dark\:border-purple-700 { border-color: #6D28D9; }
  
  .dark\:text-teal-500 { color: #14B8A6; }

  /* Animations */
  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
  }
  .animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }
</style>

관련 구성 요소

Table of Contents 구성 요소

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

열다

Table of Contents 구성 요소

다크 모드용으로 설계된 반응형 목차 구성 요소로, 이미지와 아바타에 대한 제목과 자리 표시자가 있는 섹션이 있습니다.

열다

Table of Contents 구성 요소

Tailwind CSS를 사용하여 다크 모드를 지원하는 반응형 목차 구성 요소. 이 구성 요소는 포트폴리오 목적으로 설계되었으며, 단색 색 구성표와 JavaScript가 없는 적당한 복잡성 수준을 특징으로 합니다.

열다