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

Componente di impaginazione reattiva con supporto per 3D, colore triadico, semplice, stile Business/Corporate e 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

Componente di impaginazione

Un componente di impaginazione reattivo progettato con elementi 3D e supporto per temi scuri utilizzando Tailwind CSS.

Aperto