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
Industrial_Vibrant_Pagination_Component
Un composant de pagination complexe, de style industriel, avec des couleurs vives, conçu pour les sites Web à but non lucratif/caritatifs. Présente l’esthétique des matériaux bruts, les éléments exposés, et offre une réactivité totale et une prise en charge du mode sombre.
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
Composant de pagination avec micro-interactions pour un portfolio, à l’aide d’un schéma de couleurs triadique. Conception réactive avec prise en charge du thème sombre, pas de JavaScript.