Paginierungskomponente
Eine reaktionsschnelle, monochromatische 3D-inspirierte Paginierungskomponente für Social-Media-Schnittstellen mit Unterstützung für den Dunkelmodus, die mit Tailwind CSS erstellt wurde.
HTML-Code
<nav aria-label="Pagination" class="flex justify-center items-center space-x-2 py-4 bg-gray-100 dark:bg-gray-900">
<a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 transform translate-z-0 hover:translate-z-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 shadow-md">
Previous
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 transform translate-z-0 hover:translate-z-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 shadow-md">
1
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 transform translate-z-0 hover:translate-z-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 shadow-md">
2
</a>
<a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-indigo-600 bg-indigo-50 border border-indigo-500 rounded-md hover:bg-indigo-100 dark:bg-indigo-700 dark:border-indigo-600 dark:text-white dark:hover:bg-indigo-600 transform translate-z-0 hover:translate-z-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 shadow-md">
3
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 transform translate-z-0 hover:translate-z-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 shadow-md">
4
</a>
<a href="#" class="relative inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-300 dark:hover:bg-gray-700 transform translate-z-0 hover:translate-z-1 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 dark:focus:ring-indigo-600 shadow-md">
Next
</a>
</nav>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 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.
Paginierungskomponente
Paginierungskomponente für die Benutzeroberfläche im Dunkelmodus mit reaktionsschnellen Effekten und Unterstützung für dunkle Designs.