Rechercher des composants

Catégories

Composants Pagination
Pagination

Système de navigation qui divise le contenu en plusieurs pages
Composant de pagination

Un composant de pagination réactif conçu avec des éléments 3D et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Ouvrir Aperçu
                <div class="flex justify-center items-center mt-6">
    <nav aria-label="Pagination">
        <ul class="flex space-x-4">
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">
                    <span class="material-icons">chevron_left</span>
                </a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">1</a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">2</a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">3</a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">...</a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">10</a>
            </li>
            <li>
                <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-md bg-white text-sm font-medium text-gray-700 hover:bg-gray-100 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 dark:hover:bg-gray-700 transition-transform transform hover:scale-105">
                    <span class="material-icons">chevron_right</span>
                </a>
            </li>
        </ul>
    </nav>
</div>

<style>
@media (prefers-color-scheme: dark) {
    .bg-white {
        background-color: #1f2937;
    }
    .text-gray-700 {
        color: #e5e7eb;
    }
    .border-gray-300 {
        border-color: #4b5563;
    }
}
</style>