Компонент «Оглавление»
Адаптивный компонент Table of Contents со скевоморфизмом, пастельной цветовой гаммой и поддержкой темного режима, подходит для портфолио.
HTML-код
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg dark:shadow-xl">
<h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Table of Contents</h2>
<ul class="space-y-2">
<li>
<a href="#section1" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
<span class="font-semibold">Section 1: Introduction</span>
</a>
</li>
<li>
<a href="#section2" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
<span class="font-semibold">Section 2: Projects</span>
</a>
</li>
<li>
<a href="#section3" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
<span class="font-semibold">Section 3: Skills</span>
</a>
</li>
<li>
<a href="#section4" class="block p-3 rounded-md bg-gray-100 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-700 dark:text-gray-300 shadow-sm dark:shadow-md transform transition duration-300 hover:scale-105">
<span class="font-semibold">Section 4: Contact</span>
</a>
</li>
</ul>
</div>Связанные компоненты
3D_Music_TOC_Component
Сложный, высококонтрастный, вдохновленный 3D компонент оглавления для музыкальных и аудиоплатформ, отличающийся адаптивным дизайном и поддержкой темных режимов.
Компонент «Оглавление»
Адаптивный компонент оглавления для интерфейсов социальных сетей, разработанный с использованием темного режима пользовательского интерфейса с использованием земляных тонов и простой компоновкой. Он поддерживает темную тему с использованием Tailwind CSS и работает только на HTML без JavaScript.
Ретро Содержание
Адаптивный компонент оглавления с ретро/винтажным дизайном, аналогичной цветовой схемой и поддержкой темного режима. Подходит для бизнес/корпоративных сайтов. Использует Tailwind CSS без JavaScript.