Компоненты Содержание Компонент «Оглавление»

Компонент «Оглавление»

Адаптивный компонент оглавления, стилизованный под 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, стилизованный под Material Design с яркими цветами, подходит для блогов и потребления контента, включая поддержку темного режима и множество интерактивных элементов.

Открытый

Ретро конфеты Содержание

Ностальгический компонент оглавления в стиле ретро с цветовой гаммой, вдохновленной конфетами, подходит для сайтов еды и ресторанов. Имеет «липкую» навигацию, похожую на боковую панель, с плавными индикаторами прокрутки и поддержкой темного режима.

Открытый

Ретро Содержание

Адаптивный компонент оглавления с ретро/винтажным дизайном, аналогичной цветовой схемой и поддержкой темного режима. Подходит для бизнес/корпоративных сайтов. Использует Tailwind CSS без JavaScript.

Открытый