Composant de pagination de neumorphisme
Un composant de pagination avec un design Neumorphism, une palette de couleurs pastel et une complexité modérée. Il est conçu pour les portfolios et inclut un design réactif et une prise en charge des thèmes sombres en utilisant uniquement HTML et Tailwind CSS.
HTML Code
<nav aria-label="Pagination" class="flex items-center justify-center mt-8">
<ul class="flex rounded-md shadow-neumorphic-light dark:shadow-neumorphic-dark">
<li>
<a href="#" class="px-3 py-2 ml-0 leading-tight text-gray-500 bg-pastel-light rounded-l-lg hover:bg-pastel-dark hover:text-gray-700 dark:bg-pastel-dark dark:text-gray-400 dark:hover:bg-pastel-darker dark:hover:text-white">
<span class="sr-only">Previous</span>
<svg class="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
</a>
</li>
<li>
<a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-pastel-light hover:bg-pastel-dark hover:text-gray-700 dark:bg-pastel-dark dark:text-gray-400 dark:hover:bg-pastel-darker dark:hover:text-white">1</a>
</li>
<li>
<a href="#" aria-current="page" class="z-10 px-3 py-2 leading-tight text-blue-600 bg-pastel-medium hover:bg-pastel-dark hover:text-blue-700 dark:bg-pastel-darker dark:text-white">
2
</a>
</li>
<li>
<a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-pastel-light hover:bg-pastel-dark hover:text-gray-700 dark:bg-pastel-dark dark:text-gray-400 dark:hover:bg-pastel-darker dark:hover:text-white">3</a>
</li>
<li>
<a href="#" class="px-3 py-2 leading-tight text-gray-500 bg-pastel-light rounded-r-lg hover:bg-pastel-dark hover:text-gray-700 dark:bg-pastel-dark dark:text-gray-400 dark:hover:bg-pastel-darker dark:hover:text-white">
<span class="sr-only">Next</span>
<svg class="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10L7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</li>
</ul>
</nav>
<style>
/* Add your custom Neumorphism shadow styles here */
.shadow-neumorphic-light {
box-shadow: 5px 5px 10px #babecc, -5px -5px 10px #f2f2f2;
}
.shadow-neumorphic-dark {
box-shadow: 7px 7px 15px #1a1a1a, -7px -7px 15px #333333;
}
/* Define your pastel color palette */
.bg-pastel-light {
background-color: #e0e0e0;
}
.bg-pastel-medium {
background-color: #d5d5d5;
}
.bg-pastel-dark {
background-color: #cccccc;
}
.bg-pastel-darker {
background-color: #b0b0b0;
}
</style>Composants associés
Composant de pagination
Un composant de pagination réactif conçu avec un style brutaliste, utilisant des tons de terre et une complexité modérée pour un site Web d’entreprise, avec prise en charge du thème sombre.
Composant de pagination
Un composant de pagination en mode sombre simple et élégant avec des couleurs pastel, adapté aux applications de médias sociaux. Il présente un design réactif et utilise Tailwind CSS pour le style, y compris la prise en charge du mode sombre.
LuxuryPaginationComposant
Un composant de pagination élégant et sophistiqué conçu pour la documentation ou les sites wiki, avec une sensation de luxe/premium, une palette de couleurs complémentaire et des éléments interactifs riches. Entièrement réactif avec prise en charge du mode sombre.