CCHub Logo CCHub Tailwind Collection
Komponenten Paginierung Paginierungskomponente

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.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Industrial_Vibrant_Pagination_Component

Eine komplexe, industriell gestaltete Paginierungskomponente mit leuchtenden Farben, die für gemeinnützige/wohltätige Websites entwickelt wurde. Verfügt über die Ästhetik der Rohmaterialien, freiliegende Elemente und bietet volle Reaktionsfähigkeit und Unterstützung für den Dunkelmodus.

Offen

Neumorphismus-Paginierungskomponente

Eine Paginierungskomponente mit Neumorphism-Design, pastellfarbenem Farbschema und mäßiger Komplexität. Es ist für Portfolios konzipiert und bietet Unterstützung für responsives Design und dunkle Themen, die nur HTML und Tailwind CSS verwenden.

Offen

Glassmorphism Paginierungskomponente

Eine reaktionsschnelle Paginierungskomponente, die mit Glasmorphismus und einem triadischen Farbschema entwickelt wurde und sich für das Lesen von Blogs und Inhalten eignet. Es verfügt über mehrere interaktive Elemente und unterstützt den Dunkelmodus.

Offen