Компонент «Оглавление»
Минималистичный и отзывчивый компонент Оглавления, стилизованный под Tailwind CSS, поддерживающий темный режим и отличающийся чистыми элементами дизайна.
HTML-код
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 max-w-md mx-auto">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Table of Contents</h2>
<ul class="list-inside list-disc text-gray-600 dark:text-gray-300">
<li class="py-1"><a href="#section1" class="hover:text-blue-600 dark:hover:text-blue-400">Section 1</a></li>
<li class="py-1"><a href="#section2" class="hover:text-blue-600 dark:hover:text-blue-400">Section 2</a></li>
<li class="py-1"><a href="#section3" class="hover:text-blue-600 dark:hover:text-blue-400">Section 3</a></li>
<li class="py-1"><a href="#section4" class="hover:text-blue-600 dark:hover:text-blue-400">Section 4</a></li>
<li class="py-1"><a href="#section5" class="hover:text-blue-600 dark:hover:text-blue-400">Section 5</a></li>
</ul>
</div>
<div class="hidden md:flex items-center justify-center mt-8">
<img src="https://picsum.photos/150" alt="Placeholder Image" class="rounded-full border-2 border-gray-300 dark:border-gray-700">
<span class="ml-3 text-gray-600 dark:text-gray-300">Created by: <span class="font-semibold">John Doe</span></span>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
color: #e2e8f0;
}
}
</style>Связанные компоненты
Компонент «Оглавление»
Адаптивный компонент Table of Contents, предназначенный для темного режима, с разделами с заголовками и заполнителями для изображений и аватаров.
Компонент «Оглавление»
Отзывчивый компонент Table of Contents с дизайном в виде стекломорфизма и пастельной цветовой гаммой, подходит для дашбордов с визуализацией данных и панелей управления.
Содержание Компонент 34
Адаптивный компонент Table of Contents, стилизованный под Material Design, с поддержкой темных тем и использованием Tailwind CSS.