CCHub Logo CCHub Tailwind Collection
Komponenten Paginierung Brutale Paginierungskomponente

Brutale Paginierungskomponente

Eine einfache, brutalistische Paginierungskomponente für Social-Media-Schnittstellen mit Pastellfarben, Unterstützung des Dunkelmodus und Reaktionsfähigkeit.

Vorschau

HTML-Code 

<nav aria-label="Pagination" class="flex justify-between text-pastel-600 dark:text-pastel-400 font-mono text-lg">
  <a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">Previous</a>
  <div>
    <a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded mx-1 transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">1</a>
    <a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded mx-1 transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">2</a>
    <a href="#" aria-current="page" class="bg-pastel-400 dark:bg-pastel-600 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded mx-1">3</a>
    <a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded mx-1 transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">4</a>
    <a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded mx-1 transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">5</a>
  </div>
  <a href="#" class="bg-pastel-200 dark:bg-pastel-800 border-2 border-pastel-600 dark:border-pastel-400 px-4 py-2 rounded transition duration-300 ease-in-out hover:bg-pastel-300 dark:hover:bg-pastel-700">Next</a>
</nav>

Verwandte Komponenten

Paginierungskomponente

Paginierungskomponente für die Benutzeroberfläche im Dunkelmodus mit reaktionsschnellen Effekten und Unterstützung für dunkle Designs.

Offen

Paginierungskomponente

Eine reaktionsschnelle Paginierungskomponente in einem brutalistischen Stil, die für Geschäfts-/Unternehmenswebsites geeignet ist und ein triadisches Farbschema und Unterstützung für den Dunkelmodus bietet.

Offen

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.

Offen