Composant de pagination Glassmorphism
Un composant de pagination réactif conçu avec un glassmorphisme et une palette de couleurs triadique, adapté à la lecture de blogs et de contenus. Il comporte plusieurs éléments interactifs et prend en charge le mode sombre.
HTML Code
<div class="flex justify-center mt-6">
<nav class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4">
<ul class="flex items-center space-x-2">
<li>
<a href="#" class="px-3 py-1 rounded-lg hover:bg-blue-500 dark:hover:bg-blue-700 text-blue-600 dark:text-blue-300">Previous</a>
</li>
<li>
<a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">1</a>
</li>
<li>
<a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">2</a>
</li>
<li>
<a href="#" class="px-3 py-1 rounded-lg hover:bg-orange-500 dark:hover:bg-orange-700 text-orange-600 dark:text-orange-300">3</a>
</li>
<li>
<a href="#" class="px-3 py-1 rounded-lg hover:bg-red-500 dark:hover:bg-red-700 text-red-600 dark:text-red-300">Next</a>
</li>
</ul>
</nav>
</div>
<div class="flex justify-center mt-8 space-x-6">
<div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
<img class="rounded-t-lg" src="https://picsum.photos/300/150?random=1" alt="Content Image" />
<h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 1</h2>
<p class="text-sm text-gray-600 dark:text-gray-300 text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
<img class="rounded-t-lg" src="https://picsum.photos/300/150?random=2" alt="Content Image" />
<h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 2</h2>
<p class="text-sm text-gray-600 dark:text-gray-300 text-center">Pellentesque habitant morbi tristique senectus.</p>
</div>
<div class="bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-md dark:bg-gray-800 dark:bg-opacity-30 border border-gray-300 dark:border-gray-600 p-4 w-64">
<img class="rounded-t-lg" src="https://picsum.photos/300/150?random=3" alt="Content Image" />
<h2 class="text-lg font-bold text-center mt-2 dark:text-white">Blog Title 3</h2>
<p class="text-sm text-gray-600 dark:text-gray-300 text-center">Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</div>Composants associés
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.
Composant de pagination
Un composant de pagination réactif simple conçu pour le mode sombre avec un schéma de couleurs analogue, adapté à un portfolio.
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.