Componentes Paginación Componente de paginación brutal

Componente de paginación brutal

Un componente de paginación simple de estilo brutalista para interfaces de redes sociales con colores pastel, compatibilidad con modo oscuro y capacidad de respuesta.

Vista previa

Código 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>

Componentes relacionados

Componente de paginación

Componente de paginación con microinteracciones para un portafolio, utilizando un esquema de color triádico. Diseño responsivo con soporte para temas oscuros, sin JavaScript.

Abrir

Paginación de comercio electrónico

Un componente de paginación responsivo inspirado en el diseño de materiales con soporte para temas oscuros, adecuado para listados de productos de comercio electrónico. Implementa un esquema de color complementario y una complejidad moderada con estados de botón interactivos que utilizan solo HTML y Tailwind CSS.

Abrir

Neon_Glow_Pagination_Sports_Fitness

Un componente de paginación simple y receptivo con un efecto de neón/brillo, combinación de colores triádica, diseñado para aplicaciones deportivas y de fitness, con soporte para modo oscuro.

Abrir