Компоненты Содержание Компонент «Оглавление»

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

Адаптивный компонент оглавления для интерфейсов социальных сетей, разработанный с использованием темного режима пользовательского интерфейса с использованием земляных тонов и простой компоновкой. Он поддерживает темную тему с использованием Tailwind CSS и работает только на HTML без JavaScript.

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

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>

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

Содержание

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

Открытый

Ретро Содержание

Адаптивный компонент оглавления с ретро/винтажным дизайном, аналогичной цветовой схемой и поддержкой темного режима. Подходит для бизнес/корпоративных сайтов. Использует Tailwind CSS без JavaScript.

Открытый

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

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

Открытый