CCHub Logo CCHub Tailwind Collection
구성 요소 목차 Table of Contents 구성 요소

Table of Contents 구성 요소

반응형 및 다크 모드 지원 Table of Contents 구성 요소는 데이트/소셜 플랫폼에 적합한 레트로/빈티지 색상 팔레트가 있습니다. 차분한 색 구성표와 부드러운 스크롤 탐색이 특징입니다.

미리 보기

HTML 코드 

<div class="p-4 sm:p-6 md:p-8 bg-gray-200 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-xs mx-auto md:max-w-sm lg:max-w-md xl:max-w-lg bg-red-800 bg-opacity-70 dark:bg-red-950 dark:bg-opacity-70 rounded-lg shadow-xl overflow-hidden backdrop-filter backdrop-blur-sm">
    <div class="p-4 sm:p-5 md:p-6 bg-red-900 bg-opacity-80 dark:bg-red-900 dark:bg-opacity-90 border-b border-rose-900 dark:border-rose-950">
      <h2 class="text-xl sm:text-2xl font-bold text-amber-200 dark:text-amber-100 uppercase tracking-wide text-center">Explore Profiles</h2>
    </div>
    <nav class="py-3 sm:py-4 md:py-5">
      <ul class="space-y-1 sm:space-y-2 px-3 sm:px-4 md:px-5">
        <li>
          <a href="#popular" class="flex items-center p-2 sm:p-3 rounded-lg text-amber-100 dark:text-amber-50 hover:bg-red-700 dark:hover:bg-red-800 transition-colors duration-200 group">
            <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-3 text-amber-300 dark:text-amber-200 group-hover:text-amber-100 dark:group-hover:text-amber-50" 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="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a4 4 0 014-4h12v-2.334A4.9 4.9 0 0013 3h-1.06C11.393 4.8 9.721 6 7.854 6c-.958 0-1.868-.27-2.614-.723M17 20a2 2 0 01-2 2H3a2 2 0 01-2-2

관련 구성 요소

Table of Contents 구성 요소

머티리얼 디자인 스타일로 디자인된 간단한 목차 구성 요소로, 흙색을 활용하고 다크 모드를 지원합니다. 블로그의 콘텐츠 소비에 적합합니다.

열다

Table of Contents 구성 요소

3D 디자인 느낌의 단순하고 생생하며 반응이 빠른 목차 구성 요소로, 다크 모드 지원을 포함하여 여행/관광 웹사이트에 적합합니다.

열다

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

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

열다