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 des éléments 3D et la prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant de pagination brutale
Un composant de pagination simple, de style brutaliste, pour les interfaces de médias sociaux avec des couleurs pastel, la prise en charge du mode sombre et la réactivité.
Composant de pagination
Un composant de pagination réactif, monochrome inspiré de la 3D pour les interfaces de médias sociaux, avec prise en charge du mode sombre, conçu avec Tailwind CSS.