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