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

Компонент брутальной пагинации

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

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

HTML-код

<nav aria-label="Pagination" class="flex justify-between text-pastel-600 dark:text-pastel-400 font-mono text-lg">
  <a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">Previous</a>
  <div>
    <a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded mx-1 transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">1</a>
    <a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded mx-1 transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">2</a>
    <a href="#" aria-current="page" class="bg-pastel-400 dark:bg-pastel-600 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded mx-1">3</a>
    <a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded mx-1 transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">4</a>
    <a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded mx-1 transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">5</a>
  </div>
  <a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">Next</a>
</nav>

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

Artistic_Sepia_Pagination_Component

Сложный, художественный компонент нумерации страниц в оттенках сепии/коричневого, вдохновленный акварельными текстурами, подходит для CRM/Business Tools. Полностью адаптивный с поддержкой темного режима.

Открытый

Neon_Glow_Pagination_Sports_Fitness

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

Открытый

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

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

Открытый