Componenti Impaginazione Componente di impaginazione

Componente di impaginazione

Un componente di impaginazione reattivo progettato con uno stile brutalista, utilizzando toni della terra e complessità moderata per un sito Web aziendale/aziendale, con supporto per temi scuri.

Anteprima

Codice 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>

Componenti correlati

Neon_Glow_Pagination_Sports_Fitness

Un componente di impaginazione semplice e reattivo con effetto neon/bagliore, combinazione di colori triadici, progettato per applicazioni sportive e di fitness, con supporto per la modalità scura.

Aperto

Brutalist_Retro_Pagination

Un componente di impaginazione semplice, in stile brutalista, con una combinazione di colori retrò, adatto per siti Web di notizie e giornalismo. Presenta un contrasto elevato, una tipografia audace e il supporto della modalità scura.

Aperto

Componente di impaginazione Glassmorphism

Un componente di impaginazione reattivo progettato con glassmorphism e una combinazione di colori triadica, adatto per la lettura di blog e contenuti. È dotato di più elementi interattivi e supporta la modalità oscura.

Aperto