Компонент неморфной пагинации
Отзывчивый и интерактивный компонент пагинации, стилизованный под Neumorphism для интерфейса блога, с поддержкой темного режима.
HTML-код
<div class="flex items-center justify-center py-8"> <nav aria-label="Pagination" class="hidden md:flex space-x-2"> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">Previous</span> </button> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">1</span> </button> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">2</span> </button> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">3</span> </button> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">Next</span> </button> </nav> <nav aria-label="Pagination" class="flex md:hidden space-x-2"> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">Previous</span> </button> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">Next</span> </button> </nav> <div class="flex rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 mt-5 items-center space-x-2"> <span class="text-gray-800 dark:text-gray-200">Page</span> <input type="number" class="w-12 text-center bg-transparent border-b border-gray-400 dark:border-gray-600 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500" value="1"> <span class="text-gray-800 dark:text-gray-200">of 3</span> </div></div>Связанные компоненты
Неоморфная неоновая пагинация для музыки/аудио
Отзывчивый компонент нумерации страниц, выполненный в неморфном стиле и ярких неоновых/электрических цветах, подходит для потоковой передачи музыки и аудиоплатформ. Включает поддержку темного режима.
Компонент пагинации
Простой адаптивный компонент пагинации, предназначенный для темного режима с аналогичной цветовой гаммой, подходит для портфолио.
Retro_Grayscale_Crypto_Pagination
Сложный компонент пагинации в стиле ретро/винтаж для приложений криптовалюты/блокчейна с использованием цветовой схемы в оттенках серого. Он полностью отзывчив и поддерживает темный режим.