Componente di impaginazione
Un componente di impaginazione reattivo progettato in stile brutalista, adatto per siti Web aziendali/aziendali, con una combinazione di colori triadica e supporto per la modalità scura.
Codice HTML
<div class="flex justify-center items-center space-x-4 py-8">
<a href="#" class="px-4 py-2 text-white bg-yellow-400 dark:bg-yellow-600 rounded-lg font-bold uppercase tracking-wide hover:bg-yellow-500 dark:hover:bg-yellow-700">Prev</a>
<span class="text-white dark:text-gray-300">Page 1 of 10</span>
<a href="#" class="px-4 py-2 text-white bg-yellow-400 dark:bg-yellow-600 rounded-lg font-bold uppercase tracking-wide hover:bg-yellow-500 dark:hover:bg-yellow-700">Next</a>
</div>
<div class="flex justify-center items-center space-x-2">
<a href="#" class="px-3 py-1 text-gray-800 bg-blue-300 dark:bg-blue-700 rounded-lg font-bold hover:bg-blue-400 dark:hover:bg-blue-800">1</a>
<a href="#" class="px-3 py-1 text-gray-800 bg-white dark:bg-gray-800 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-700">2</a>
<a href="#" class="px-3 py-1 text-gray-800 bg-white dark:bg-gray-800 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-700">3</a>
<a href="#" class="px-3 py-1 text-gray-800 bg-white dark:bg-gray-800 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-700">4</a>
<a href="#" class="px-3 py-1 text-gray-800 bg-white dark:bg-gray-800 rounded-lg font-bold hover:bg-gray-300 dark:hover:bg-gray-700">5</a>
</div>
<div class="flex justify-center items-center space-x-4 mt-4">
<a href="#" class="px-4 py-2 text-white bg-yellow-400 dark:bg-yellow-600 rounded-lg font-bold uppercase tracking-wide hover:bg-yellow-500 dark:hover:bg-yellow-700">Last</a>
</div>Componenti correlati
Impaginazione aziendale Art Déco
Un sofisticato componente di impaginazione ispirato all'estetica Art Déco, con motivi geometrici e una combinazione di colori blu aziendale. È reattivo, include il supporto per la modalità oscura ed è adatto per siti Web aziendali professionali.
Impaginazione e-commerce
Un componente di impaginazione reattivo ispirato al Material Design con supporto per il tema scuro, adatto per elenchi di prodotti di e-commerce. Implementa una combinazione di colori complementari e una complessità moderata con stati dei pulsanti interattivi utilizzando solo HTML e Tailwind CSS.
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.