Neumorphe Paginierungskomponente
Eine reaktionsschnelle und interaktive Paginierungskomponente im Neumorphism-Stil für eine Blog-Oberfläche mit Unterstützung für den Dunkelmodus.
HTML-Code
<div class="flex items-center justify-center py-8"> <nav aria-label="Pagination" class="hidden md:flex space-x-2"> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">Previous</span> </button> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">1</span> </button> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">2</span> </button> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">3</span> </button> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">Next</span> </button> </nav> <nav aria-label="Pagination" class="flex md:hidden space-x-2"> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">Previous</span> </button> <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300"> <span class="text-gray-800 dark:text-gray-200">Next</span> </button> </nav> <div class="flex rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 mt-5 items-center space-x-2"> <span class="text-gray-800 dark:text-gray-200">Page</span> <input type="number" class="w-12 text-center bg-transparent border-b border-gray-400 dark:border-gray-600 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500" value="1"> <span class="text-gray-800 dark:text-gray-200">of 3</span> </div></div>Verwandte Komponenten
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.
Paginierungskomponente
Eine einfache, reaktionsschnelle Paginierungskomponente, die für den Dunkelmodus mit einem analogen Farbschema entwickelt wurde und für ein Portfolio geeignet ist.
Skeuomorphic_Purple_Pagination
Eine komplexe, skeuomorphe Paginierungskomponente, die für Beratungs-/Dienstleistungswebsites entwickelt wurde, mit einem violetten/violetten Farbschema und voller Reaktionsfähigkeit mit Unterstützung des Dunkelmodus.