Компонент «Оглавление»
Адаптивный компонент Table of Contents, предназначенный для темного режима, с разделами с заголовками и заполнителями для изображений и аватаров.
HTML-код
<div class="bg-gray-900 text-white min-h-screen p-5">
<h1 class="text-3xl font-bold mb-4">Table of Contents</h1>
<ul class="space-y-4">
<li class="bg-gray-800 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-200">
<div class="flex items-center">
<img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full mr-3">
<h2 class="text-xl font-semibold">Section 1</h2>
</div>
<p class="mt-2 text-gray-400">Description for section 1 goes here. It can contain an overview or an introduction.</p>
</li>
<li class="bg-gray-800 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-200">
<div class="flex items-center">
<img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full mr-3">
<h2 class="text-xl font-semibold">Section 2</h2>
</div>
<p class="mt-2 text-gray-400">Description for section 2 goes here. It can contain an overview or an introduction.</p>
</li>
<li class="bg-gray-800 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-200">
<div class="flex items-center">
<img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full mr-3">
<h2 class="text-xl font-semibold">Section 3</h2>
</div>
<p class="mt-2 text-gray-400">Description for section 3 goes here. It can contain an overview or an introduction.</p>
</li>
<li class="bg-gray-800 rounded-lg p-4 shadow hover:shadow-lg transition-shadow duration-200">
<div class="flex items-center">
<img src="https://picsum.photos/50" alt="Placeholder Image" class="rounded-full mr-3">
<h2 class="text-xl font-semibold">Section 4</h2>
</div>
<p class="mt-2 text-gray-400">Description for section 4 goes here. It can contain an overview or an introduction.</p>
</li>
</ul>
</div>Связанные компоненты
Содержание
Отзывчивый компонент Table of Contents, стилизованный под Glassmorphism, с полупрозрачными элементами, похожими на матовое стекло, с эффектами размытия и поддержкой темных тем. Включает разделы и изображения-заполнители для визуального представления.
Компонент «Оглавление»
Адаптивный компонент Table of Contents, стилизованный в соответствии с принципами Material Design с использованием Tailwind CSS, поддерживающий темный режим и включающий замещающие изображения и аватары.
Компонент «Оглавление»
Адаптивный компонент Table of Contents, выполненный в стиле пользовательского интерфейса Dark Mode, с разделами, заголовками, описаниями и случайными изображениями/аватарами.