Компонент «Оглавление»
Адаптивный компонент Table of Contents, стилизованный в соответствии с принципами Material Design с использованием Tailwind CSS, поддерживающий темный режим и включающий замещающие изображения и аватары.
HTML-код
<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-white">Table of Contents</h2>
<ul class="space-y-2">
<li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
<div class="flex items-center">
<img src="https://picsum.photos/40/40?random=1" alt="Avatar 1" class="rounded-full mr-3">
<a href="#section1" class="text-gray-700 dark:text-gray-200 hover:underline">Section 1: Introduction</a>
</div>
</li>
<li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
<div class="flex items-center">
<img src="https://picsum.photos/40/40?random=2" alt="Avatar 2" class="rounded-full mr-3">
<a href="#section2" class="text-gray-700 dark:text-gray-200 hover:underline">Section 2: Getting Started</a>
</div>
</li>
<li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
<div class="flex items-center">
<img src="https://picsum.photos/40/40?random=3" alt="Avatar 3" class="rounded-full mr-3">
<a href="#section3" class="text-gray-700 dark:text-gray-200 hover:underline">Section 3: Features</a>
</div>
</li>
<li class="p-4 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 transition ease-in-out duration-150">
<div class="flex items-center">
<img src="https://picsum.photos/40/40?random=4" alt="Avatar 4" class="rounded-full mr-3">
<a href="#section4" class="text-gray-700 dark:text-gray-200 hover:underline">Section 4: Conclusion</a>
</div>
</li>
</ul>
</div>Связанные компоненты
Компонент «Оглавление»
Адаптивный компонент оглавления для интерфейсов социальных сетей, разработанный с использованием темного режима пользовательского интерфейса с использованием земляных тонов и простой компоновкой. Он поддерживает темную тему с использованием Tailwind CSS и работает только на HTML без JavaScript.
Ретро конфеты Содержание
Ностальгический компонент оглавления в стиле ретро с цветовой гаммой, вдохновленной конфетами, подходит для сайтов еды и ресторанов. Имеет «липкую» навигацию, похожую на боковую панель, с плавными индикаторами прокрутки и поддержкой темного режима.
Компонент «Оглавление»
Адаптивный компонент Table of Contents, выполненный в стиле пользовательского интерфейса Dark Mode, с разделами, заголовками, описаниями и случайными изображениями/аватарами.