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

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

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

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

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>

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

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

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

Открытый

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

Компонент пагинации с дизайном Neumorphism, пастельной цветовой гаммой и умеренной сложностью. Он предназначен для портфолио и включает в себя адаптивный дизайн и поддержку темных тем, используя только HTML и Tailwind CSS.

Открытый

Brutalist_Retro_Pagination

Простой, бруталистский компонент пагинации с ретро-цветовой гаммой, подходящий для новостных и журналистских сайтов. Отличается высокой контрастностью, жирной типографикой и поддержкой темных режимов.

Открытый