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