Компонент «Оглавление»
Адаптивный компонент Table of Contents с поддержкой темного режима с использованием Tailwind CSS. Компонент предназначен для портфолио, отличается монохроматической цветовой гаммой и умеренным уровнем сложности без JavaScript.
HTML-код
<div class="bg-gray-900 text-gray-300 p-8 min-h-screen">
<div class="max-w-4xl mx-auto">
<h1 class="text-3xl font-bold text-white mb-8">Table of Contents</h1>
<div class="bg-gray-800 p-6 rounded-lg shadow-lg">
<ul class="space-y-4">
<li>
<a href="#section-1" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
<span class="font-semibold text-gray-300">Section 1:</span> Introduction
</a>
</li>
<li>
<a href="#section-2" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
<span class="font-semibold text-gray-300">Section 2:</span> About Me
</a>
<ul class="ml-6 mt-2 space-y-2">
<li>
<a href="#section-2-1" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
2.1 My Background
</a>
</li>
<li>
<a href="#section-2-2" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
2.2 Skills
</a>
</li>
</ul>
</li>
<li>
<a href="#section-3" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
<span class="font-semibold text-gray-300">Section 3:</span> My Work
</a>
<ul class="ml-6 mt-2 space-y-2">
<li>
<a href="#section-3-1" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
3.1 Project Alpha
</a>
</li>
<li>
<a href="#section-3-2" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
3.2 Project Beta
</a>
</li>
<li>
<a href="#section-3-3" class="text-gray-500 hover:text-white transition duration-300 ease-in-out">
3.3 Project Gamma
</a>
</li>
</ul>
</li>
<li>
<a href="#section-4" class="text-gray-400 hover:text-white transition duration-300 ease-in-out">
<span class="font-semibold text-gray-300">Section 4:</span> Contact
</a>
</li>
</ul>
</div>
</div>
</div>Связанные компоненты
Компонент «Оглавление»
Адаптивный компонент Table of Contents, предназначенный для темного режима, с разделами с заголовками и заполнителями для изображений и аватаров.
Компонент «Оглавление»
Адаптивный компонент оглавления, стилизованный под Neumorphism с использованием Tailwind CSS, с поддержкой темных тем и отображением замещающих изображений и аватаров.
Компонент «Оглавление»
Адаптивный компонент Table of Contents, выполненный в стиле пользовательского интерфейса Dark Mode, с разделами, заголовками, описаниями и случайными изображениями/аватарами.