Table of Contents 구성 요소
소셜 미디어 인터페이스를 위한 반응형 목차 구성 요소로, 흙색과 간단한 레이아웃을 사용하는 다크 모드 UI로 설계되었습니다. Tailwind CSS를 사용하여 어두운 테마를 지원하며 JavaScript가 없는 HTML 전용입니다.
HTML 코드
<nav class="p-4 bg-gray-900 text-stone-200 min-h-screen dark:bg-gray-900">
<h2 class="text-xl font-bold mb-4 text-stone-100">Table of Contents</h2>
<ul class="space-y-2">
<li><a href="#section-1" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Introduction</a></li>
<li><a href="#section-2" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Getting Started</a></li>
<li><a href="#section-3" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">User Profiles</a></li>
<li><a href="#section-4" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Creating Posts</a></li>
<li><a href="#section-5" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Interacting with Content</a></li>
<li><a href="#section-6" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Privacy Settings</a></li>
<li><a href="#section-7" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Notifications</a></li>
<li><a href="#section-8" class="block py-2 px-3 rounded hover:bg-stone-700 hover:text-stone-50 transition-colors duration-200">Troubleshooting</a></li>
</ul>
</nav>관련 구성 요소
목차
Glassmorphism으로 스타일링된 반응형 목차 구성 요소로, 흐림 효과와 어두운 테마를 지원하는 젖빛 유리와 같은 반투명 요소를 특징으로 합니다. 시각적 표현을 위한 섹션과 자리 표시자 이미지가 포함되어 있습니다.
레트로 목차
반응형 목차 구성 요소에는 레트로/빈티지 디자인, 유사한 색 구성표 및 다크 모드가 지원됩니다. 비즈니스/기업 웹사이트에 적합합니다. JavaScript 없이 Tailwind CSS를 사용합니다.
Table of Contents 구성 요소
Tailwind CSS로 스타일이 지정된 미니멀하고 반응이 빠른 목차 구성 요소로, 다크 모드를 지원하고 깔끔한 디자인 요소를 특징으로 합니다.