Componenti Impaginazione Impaginazione e-commerce

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.

Anteprima

Codice HTML

<nav aria-label="Pagination" class="flex justify-center items-center space-x-2 my-4 dark:bg-gray-800 p-2 rounded-md">
  <button class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    Previous
  </button>
  <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-blue-200 rounded-md hover:bg-blue-300 dark:bg-blue-700 dark:text-blue-200 dark:hover:bg-blue-600">
    1
  </a>
  <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    2
  </a>
  <a href="#" aria-current="page" class="px-3 py-2 text-sm font-medium text-white bg-blue-500 rounded-md dark:bg-blue-500">
    3
  </a>
  <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    4
  </a>
  <a href="#" class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    5
  </a>
  <button class="px-3 py-2 text-sm font-medium text-gray-700 bg-gray-200 rounded-md hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600">
    Next
  </button>
</nav>

Componenti correlati

Componente di impaginazione del neumorfismo

Un componente di impaginazione con design a neumorfismo, combinazione di colori pastello e complessità moderata. È progettato per i portfolio e include il design reattivo e il supporto per i temi scuri utilizzando solo HTML e Tailwind CSS.

Aperto

NeonGlowPaginazione

Un componente di impaginazione reattivo con effetti neon/bagliore, che utilizza una tavolozza di colori foresta/verde adatta per applicazioni di criptovaluta e blockchain. Dispone di supporto per la modalità oscura e HTML semantico.

Aperto

Retro_Grayscale_Crypto_Pagination

Un componente di impaginazione complesso, in stile retrò/vintage per applicazioni di criptovaluta/blockchain, che utilizza una combinazione di colori in scala di grigi. È completamente reattivo e supporta la modalità oscura.

Aperto