CCHub Logo CCHub Tailwind Collection
Komponenten Paginierung E-Commerce-Paginierung

E-Commerce-Paginierung

Eine von Responsive Material Design inspirierte Paginierungskomponente mit Unterstützung für dunkle Themen, die sich für E-Commerce-Produktangebote eignet. Implementiert ein komplementäres Farbschema und moderate Komplexität mit interaktiven Schaltflächenzuständen, die nur HTML und Tailwind CSS verwenden.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Art Deco Unternehmens-Paginierung

Eine ausgeklügelte Paginierungskomponente, die von der Art-Déco-Ästhetik inspiriert ist, mit geometrischen Mustern und einem blauen Farbschema. Es ist reaktionsschnell, unterstützt den Dunkelmodus und eignet sich für professionelle Business-Websites.

Offen

Paginierungskomponente

Eine einfache und elegante Paginierungskomponente im Dark-Modus mit Pastellfarben, die für Social-Media-Anwendungen geeignet ist. Es verfügt über ein responsives Design und verwendet Tailwind CSS für das Styling, einschließlich Unterstützung des Dunkelmodus.

Offen

Paginierungskomponente

Responsive Paginierungskomponente mit Unterstützung für 3D, Triadic Color, Simple, Business/Corporate Style und Dark Mode

Offen