Компоненты Нумерация страниц Компонент пагинации

Компонент пагинации

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

Предварительный просмотр

HTML-код

<div class="flex justify-center items-center space-x-4 py-4">
    <button class="border-2 border-brown-600 text-brown-600 dark:border-brown-300 dark:text-brown-300 px-4 py-2 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
        Previous
    </button>
    <span class="text-brown-600 dark:text-brown-300">Page 1 of 10</span>
    <button class="border-2 border-brown-600 text-brown-600 dark:border-brown-300 dark:text-brown-300 px-4 py-2 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
        Next
    </button>
</div>

<div class="flex justify-center items-center space-x-2 py-4">
    <button class="border border-brown-600 dark:border-brown-300 text-brown-600 dark:text-brown-300 px-2 py-1 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
        1
    </button>
    <button class="border border-brown-600 dark:border-brown-300 text-brown-600 dark:text-brown-300 px-2 py-1 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
        2
    </button>
    <button class="border border-brown-600 dark:border-brown-300 text-brown-600 dark:text-brown-300 px-2 py-1 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
        3
    </button>
    <button class="border border-brown-600 dark:border-brown-300 text-brown-600 dark:text-brown-300 px-2 py-1 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
        4
    </button>
    <button class="border border-brown-600 dark:border-brown-300 text-brown-600 dark:text-brown-300 px-2 py-1 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
        5
    </button>
</div>

<div class="flex justify-center items-center space-x-4 py-4">
    <button class="border-2 border-brown-600 text-brown-600 dark:border-brown-300 dark:text-brown-300 px-4 py-2 rounded-md hover:bg-brown-600 hover:text-white dark:hover:bg-brown-300 dark:hover:text-black">
        Last
    </button>
</div>

Связанные компоненты

Компонент пагинации стекломорфизма

Адаптивный компонент пагинации, разработанный с использованием стекломорфизма и триадической цветовой схемы, подходит для чтения блогов и контента. Он имеет множество интерактивных элементов и поддерживает темный режим.

Открытый

Компонент пагинации

Адаптивный компонент пагинации, разработанный с 3D-элементами и поддержкой темных тем с использованием Tailwind CSS.

Открытый

Пагинация электронной коммерции

Адаптивный компонент пагинации с поддержкой темной темы, вдохновленный Material Design, подходит для объявлений о товарах в электронной коммерции. Реализует комплементарную цветовую схему и умеренную сложность с интерактивными состояниями кнопок с использованием только HTML и Tailwind CSS.

Открытый