Содержание

Компонент оглавления с дизайном микровзаимодействий, аналогичной цветовой схемой, простой сложностью и назначением для социальных сетей. Адаптивный с поддержкой темных тем. Нет JavaScript-кода.

Предварительный просмотр

HTML-код

<nav class="p-4 bg-gray-100 dark:bg-gray-800">
  <ul class="space-y-2">
    <li><a href="#section1" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 1</a></li>
    <li><a href="#section2" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 2</a></li>
    <li><a href="#section3" class="block py-2 px-4 text-gray-700 hover:bg-gray-200 dark:text-gray-300 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105">Section 3</a></li>
  </ul>
</nav>

Связанные компоненты

Содержание Компонент 34

Адаптивный компонент Table of Contents, стилизованный под Material Design, с поддержкой темных тем и использованием Tailwind CSS.

Открытый

Компонент «Оглавление»

Простой, яркий и отзывчивый компонент оглавления с ощущением 3D-дизайна, подходящий для веб-сайтов о путешествиях и туризме, включая поддержку темного режима.

Открытый

Компонент «Оглавление»

Адаптивный компонент Table of Contents, выполненный в стиле пользовательского интерфейса Dark Mode, с разделами, заголовками, описаниями и случайными изображениями/аватарами.

Открытый