Компонент «Оглавление»
Адаптивный компонент оглавления, стилизованный под Neumorphism с использованием Tailwind CSS, с поддержкой темных тем и отображением замещающих изображений и аватаров.
HTML-код
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-md space-y-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Table of Contents</h2>
<ul class="space-y-2">
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
<a href="#section1" class="text-lg text-gray-800 dark:text-gray-200">Section 1</a>
</div>
</li>
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
<a href="#section2" class="text-lg text-gray-800 dark:text-gray-200">Section 2</a>
</div>
</li>
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
<a href="#section3" class="text-lg text-gray-800 dark:text-gray-200">Section 3</a>
</div>
</li>
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
<a href="#section4" class="text-lg text-gray-800 dark:text-gray-200">Section 4</a>
</div>
</li>
<li class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-lg transition-transform transform hover:scale-105">
<div class="flex items-center space-x-3">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-white shadow-md">
<a href="#section5" class="text-lg text-gray-800 dark:text-gray-200">Section 5</a>
</div>
</li>
</ul>
</div>Связанные компоненты
Компонент «Оглавление»
Отзывчивый компонент Table of Contents с дизайном в виде стекломорфизма и пастельной цветовой гаммой, подходит для дашбордов с визуализацией данных и панелей управления.
Компонент «Оглавление»
Простой, отзывчивый компонент Оглавления с неоново-светящимися эффектами и осенней цветовой схемой, подходящий для портфолио фотографий или галерей, включая поддержку темного режима.
Glassmorphism_RealEstate_TableOfContents
Компонент оглавления в стиле glassmorphism для списков недвижимости, включающий полупрозрачные элементы, эффекты размытия и фиолетово-фиолетовую цветовую схему. Он отзывчив и поддерживает темный режим.