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.
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
Paginación de neón neomórfica para música/audio
Un componente de paginación responsivo diseñado con un estilo neumórfico y colores neón/eléctricos brillantes, adecuado para plataformas de audio y transmisión de música. Incluye soporte para modo oscuro.
Artistic_Sepia_Pagination_Component
Un componente de paginación complejo y artístico con tonos sepia/marrón, inspirado en texturas de acuarela, adecuado para CRM/Business Tools. Totalmente receptivo con soporte para modo oscuro.
LuxuryPaginationComponent
Un componente de paginación elegante y sofisticado diseñado para sitios de documentación o wiki, con una sensación de lujo/premium, combinación de colores complementaria y ricos elementos interactivos. Totalmente receptivo con soporte para modo oscuro.