CCHub Logo CCHub Tailwind Collection
Komponenten Paginierung Paginierungskomponente

Paginierungskomponente

Eine einfache, reaktionsschnelle Paginierungskomponente, die für den Dunkelmodus mit einem analogen Farbschema entwickelt wurde und für ein Portfolio geeignet ist.

Vorschau

HTML-Code 

<div class="flex justify-center items-center space-x-4 py-6">
    <a href="#" class="px-4 py-2 border border-gray-700 text-gray-300 bg-gray-800 rounded-md hover:bg-gray-700 dark:border-gray-500 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-600">&laquo; Previous</a>
    <a href="#" class="px-4 py-2 border border-gray-700 text-gray-300 bg-gray-800 rounded-md hover:bg-gray-700 dark:border-gray-500 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-600">1</a>
    <a href="#" class="px-4 py-2 border border-gray-700 text-gray-300 bg-gray-800 rounded-md hover:bg-gray-700 dark:border-gray-500 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-600">2</a>
    <a href="#" class="px-4 py-2 border border-gray-700 text-gray-300 bg-gray-800 rounded-md hover:bg-gray-700 dark:border-gray-500 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-600">3</a>
    <a href="#" class="px-4 py-2 border border-gray-700 text-gray-300 bg-gray-800 rounded-md hover:bg-gray-700 dark:border-gray-500 dark:text-gray-400 dark:bg-gray-900 dark:hover:bg-gray-600">Next &raquo;</a>
</div>

Verwandte Komponenten

Paginierungskomponente

Paginierungskomponente mit Mikrointeraktionen für ein Portfolio unter Verwendung eines triadischen Farbschemas. Responsives Design mit Unterstützung für dunkle Themen, kein JavaScript.

Offen

Neumorphismus-Paginierungskomponente

Neumorphism Paginierungskomponente für E-Commerce mit Tailwind CSS

Offen

Neumorphe Paginierungskomponente

Eine reaktionsschnelle und interaktive Paginierungskomponente im Neumorphism-Stil für eine Blog-Oberfläche mit Unterstützung für den Dunkelmodus.

Offen