목차 구성 요소 34
머티리얼 디자인으로 스타일이 지정된 반응형 목차 구성요소로, 어두운 테마를 지원하고 Tailwind CSS를 사용합니다.
HTML 코드
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 max-w-md mx-auto">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Table of Contents</h2>
<ul class="space-y-2">
<li>
<a href="#section1" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
Section 1
</a>
</li>
<li>
<a href="#section2" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
Section 2
</a>
</li>
<li>
<a href="#section3" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
Section 3
</a>
</li>
<li>
<a href="#section4" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
Section 4
</a>
</li>
<li>
<a href="#section5" class="flex items-center p-2 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded transition duration-150 ease-in-out">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
Section 5
</a>
</li>
</ul>
</div>관련 구성 요소
Table of Contents 구성 요소
Tailwind CSS를 사용하여 Neumorphism으로 스타일링된 반응형 목차 구성 요소로, 어두운 테마를 지원하고 자리 표시자 이미지와 아바타를 표시합니다.
목차
Table of Contents Microinteractions design, Analogous color scheme, Simple complexity 및 Social Media 목적을 가진 구성 요소. 어두운 테마 지원으로 반응형입니다. 자바스크립트 코드가 없습니다.