Lecteur audio Neumorphism
Composant de lecteur audio de style Neumorphism avec commandes de lecture, de pause, de saut et de volume, conçu pour les sites Web d’entreprise. Comprend une barre de progression, le titre de la chanson, l’artiste et la pochette de l’album. Comprend un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-900 p-4">
<div class="w-full max-w-md bg-gray-200 dark:bg-gray-800 rounded-xl p-6 shadow-xl dark:shadow-xl-dark">
<div class="flex flex-col items-center">
<div class="w-32 h-32 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner dark:shadow-inner-dark flex items-center justify-center">
<img src="https://picsum.photos/128" alt="Album Artwork" class="rounded-full w-full h-full object-cover">
</div>
<h3 class="mt-4 text-lg font-semibold text-gray-800 dark:text-gray-200">Song Title</h3>
<p class="text-sm text-gray-600 dark:text-gray-400">Artist Name - Album Name</p>
</div>
<div class="w-full mt-6">
<div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-xs">
<span>0:00</span>
<span>3:45</span>
</div>
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2 mt-1 shadow-inner dark:shadow-inner-dark">
<div class="bg-blue-500 h-2 rounded-full" style="width: 30%;"></div>
</div>
</div>
<div class="flex items-center justify-around mt-8">
<button class="w-12 h-12 bg-gray-200 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-neumorphic dark:shadow-neumorphic-dark">
<svg class="w-6 h-6 text-gray-700 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
</svg>
</button>
<button class="w-16 h-16 bg-gray-200 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-neumorphic-lg dark:shadow-neumorphic-lg-dark">
<svg class="w-8 h-8 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path>
</svg>
</button>
<button class="w-12 h-12 bg-gray-200 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-neumorphic dark:shadow-neumorphic-dark">
<svg class="w-6 h-6 text-gray-700 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<div class="flex items-center mt-6">
<svg class="w-5 h-5 text-gray-600 dark:text-gray-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M9.384 4.464A1 1 0 0110 4v12a1 1 0 01-1.707.707L6 14H3a1 1 0 01-1-1V7a1 1 0 011-1h3l2.293-2.293a1 1 0 011.091-.243zM14.003 7.77a.75.75 0 01.412 1.367l-3.495 1.896-.943-.943 3.496-1.897z" clip-rule="evenodd"></path>
</svg>
<div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2 shadow-inner dark:shadow-inner-dark">
<div class="bg-blue-500 h-2 rounded-full" style="width: 60%;"></div>
</div>
<svg class="w-5 h-5 text-gray-600 dark:text-gray-400 ml-2" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-b b a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414zm-1.414 4.242a1 1 0 10-1.414 1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
<path d="M1.723 13.863a1 1 0 00-.723.451l-1 1.5A1 1 0 001 18.122V19a1 1 0 001 1h1a1 1 0 001-1v-.878A1 1 0 003.723 18L3 16.863a1 1 0 00-.723-.451zM4 5a1 1 0 00-1 1v8a1 1 0 001 1h2a1 1 0 001-1V6a1 1 0 00-1-1H4z" clip-rule="evenodd"></path>
</svg>
</div>
</div>
</div>
<style>
.shadow-xl-dark {
box-shadow: 7px 7px 15px #1f1f1f, -7px -7px 15px #2d2d2d;
}
.shadow-inner-dark {
box-shadow: inset 5px 5px 10px #1f1f1f, inset -5px -5px 10px #2d2d2d;
}
.shadow-neumorphic {
box-shadow: 5px 5px 10px #b0b0b0, -5px -5px 10px #ffffff;
}
.shadow-neumorphic-dark {
box-shadow: 5px 5px 10px #1f1f1f, -5px -5px 10px #2d2d2d;
}
.shadow-neumorphic-lg {
box-shadow: 8px 8px 15px #b0b0b0, -8px -8px 15px #ffffff;
}
.shadow-neumorphic-lg-dark {
box-shadow: 8px 8px 15px #1f1f1f, -8px -8px 15px #2d2d2d;
}
</style>Composants associés
Composant de lecteur audio
Un composant de lecteur audio complexe et minimaliste avec une palette de couleurs rétro/vintage, conçu pour les plateformes de rencontres/sociales. Les fonctionnalités incluent les commandes de lecture, la barre de progression, le contrôle du volume, les informations sur les pistes et la prise en charge du mode sombre.
Lecteur audio monochromatique 3D
Composant de lecteur audio monochromatique 3D réactif pour portefeuille, avec prise en charge du mode sombre
Composant de lecteur audio
Un composant de lecteur audio réactif avec un design inspiré du papier/de l’impression, une palette de couleurs neutres et froides, une prise en charge du mode sombre et des fonctionnalités interactives adaptées aux plates-formes de divertissement et de médias.