Pagination néomorphique au néon pour la musique/l’audio
Un composant de pagination réactif conçu avec un style neumorphique et des couleurs néon/électriques vives, adapté au streaming musical et aux plateformes audio. Inclut la prise en charge du mode sombre.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-900 dark:to-black p-4">
<nav class="flex items-center justify-center space-x-2 p-3 rounded-xl shadow-lg border border-gray-200 dark:border-gray-800
bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900
dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.6),inset_-2px_-2px_5px_rgba(30,30,30,0.6),5px_5px_10px_rgba(0,0,0,0.3),-5px_-5px_10px_rgba(50,50,50,0.3)]
shadow-[inset_2px_2px_5px_rgba(255,255,255,0.7),inset_-2px_-2px_5px_rgba(180,180,180,0.7),5px_5px_10px_rgba(0,0,0,0.1),-5px_-5px_10px_rgba(255,255,255,0.8)]
max-w-xs sm:max-w-md md:max-w-lg lg:max-w-xl duration-300 ease-in-out">
<!-- Previous Button -->
<a href="#" class="neumorphic-button group">
<svg class="h-5 w-5 text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 transition-colors duration-200"
fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<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" />
</svg>
<span class="sr-only">Previous</span>
</a>
<!-- Page Numbers / Current Page -->
<div class="flex space-x-2 sm:space-x-1 md:space-x-2">
<a href="#" class="neumorphic-button hidden sm:flex group">
<span class="text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 font-medium transition-colors duration-200">1</span>
</a>
<a href="#" class="neumorphic-button hidden sm:flex group">
<span class="text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 font-medium transition-colors duration-200">2</span>
</a>
<span class="relative inline-flex items-center px-3 py-1.5 sm:px-4 sm:py-2 text-sm font-semibold
rounded-lg neumorphic-active
text-fuchsia-600 dark:text-cyan-500
shadow-lg dark:shadow-[inset_2px_2px_5px_rgba(0,0,0,0.6),inset_-2px_-2px_5px_rgba(30,30,30,0.6)]
shadow-[inset_2px_2px_5px_rgba(255,255,255,0.7),inset_-2px_-2px_5px_rgba(180,180,180,0.7)]
border border-fuchsia-400 dark:border-cyan-600
">
3
<span class="absolute inset-0 rounded-lg opacity-40 blur-sm
bg-gradient-to-br from-fuchsia-400 to-fuchsia-600
dark:from-cyan-400 dark:to-cyan-600"></span>
</span>
<a href="#" class="neumorphic-button hidden sm:flex group">
<span class="text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 font-medium transition-colors duration-200">4</span>
</a>
<a href="#" class="neumorphic-button hidden md:flex group">
<span class="text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 font-medium transition-colors duration-200">5</span>
</a>
<span class="text-fuchsia-500 dark:text-cyan-400 self-center hidden md:block">...</span>
<a href="#" class="neumorphic-button hidden md:flex group">
<span class="text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 font-medium transition-colors duration-200">10</span>
</a>
</div>
<!-- Next Button -->
<a href="#" class="neumorphic-button group">
<svg class="h-5 w-5 text-fuchsia-500 group-hover:text-fuchsia-400 dark:text-cyan-400 dark:group-hover:text-cyan-300 transition-colors duration-200"
fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.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" />
</svg>
<span class="sr-only">Next</span>
</a>
</nav>
<style>
/* Base styles for the neumorphic button */
.neumorphic-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.625rem 0.8rem; /* Equivalent to px-3 py-1.5, slightly tweaked for visual balance */
font-size: 0.875rem; /* text-sm */
font-weight: 500; /* font-medium */
border-radius: 0.5rem; /* rounded-lg */
color: #9240F0; /* Default text color, will be overridden by specific color classes */
transition: all 0.2s ease-in-out;
cursor: pointer;
user-select: none;
position: relative;
overflow: hidden;
/* Neumorphic default shadow (light mode) */
background: linear-gradient(145deg, #e0e0e0, #f0f0f0);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1),
-2px -2px 5px rgba(255, 255, 255, 0.8),
inset 1px 1px 2px rgba(255, 255, 255, 0.7),
inset -1px -1px 2px rgba(180, 180, 180, 0.7);
border: 1px solid transparent; /* Subtle border for definition */
}
/* Neumorphic active/pressed state */
.neumorphic-button:active,
.neumorphic-button.neumorphic-active {
background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2),
inset -3px -3px 6px rgba(255, 255, 255, 0.7);
border-color: #fca0e5; /* Hot Pink */
}
/* Neumorphic hover state (light mode) */
.neumorphic-button:hover {
background: linear-gradient(145deg, #f5f5f5, #e5e5e5);
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15),
-3px -3px 6px rgba(255, 255, 255, 0.9),
inset 1px 1px 2px rgba(255, 255, 255, 0.8),
inset -1px -1px 2px rgba(190, 190, 190, 0.8);
}
/* Dark mode for neumorphic button */
.dark .neumorphic-button {
background: linear-gradient(145deg, #2b2b2b, #1a1a1a);
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.6),
-2px -2px 5px rgba(30, 30, 30, 0.6),
inset 1px 1px 2px rgba(30, 30, 30, 0.7),
inset -1px -1px 2px rgba(0, 0, 0, 0.7);
border: 1px solid transparent; /* Subtle border for definition */
}
.dark .neumorphic-button:active,
.dark .neumorphic-button.neumorphic-active {
background: linear-gradient(145deg, #1a1a1a, #2b2b2b);
box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.8),
inset -3px -3px 6px rgba(40, 40, 40, 0.8);
border-color: #00BCD4; /* Electric Blue */
}
.dark .neumorphic-button:hover {
background: linear-gradient(145deg, #1f1f1f, #2f2f2f);
box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8),
-3px -3px 6px rgba(40, 40, 40, 0.8),
inset 1px 1px 2px rgba(40, 40, 40, 0.8),
inset -1px -1px 2px rgba(0, 0, 0, 0.8);
}
</style>
</div>Composants associés
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.
Composant de pagination neumorphe
Un composant de pagination réactif et interactif stylisé en Neumorphism pour une interface de blog, avec prise en charge du mode sombre.
Composant de pagination
Un composant de pagination réactif conçu dans un style brutaliste, adapté aux sites Web d’entreprise, doté d’une palette de couleurs triadique et d’un support en mode sombre.