Composants Lecteur audio Lecteur audio neumorphe

Lecteur audio neumorphe

Un composant simple de lecteur audio neumorphe avec un schéma de couleurs Earth Tones pour un tableau de bord, construit avec Tailwind CSS. Il prend en charge le design réactif et le thème sombre.

Aperçu

HTML Code

<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
  <div class="w-full max-w-sm bg-gray-300 dark:bg-gray-700 rounded-xl p-6 shadow-neumorphic-light dark:shadow-neumorphic-dark">
    <div class="flex items-center mb-4">
      <img class="w-16 h-16 rounded-full mr-4 shadow-neumorphic-light dark:shadow-neumorphic-dark" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Album Art">
      <div>
        <h3 class="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</p>
      </div>
    </div>
    <div class="w-full h-2 bg-gray-400 dark:bg-gray-600 rounded-full mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <div class="w-1/2 h-full bg-green-600 dark:bg-green-500 rounded-full"></div>
    </div>
    <div class="flex items-center justify-around">
      <button class="p-3 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-700 dark:text-gray-300 hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed">
        <svg class="w-6 h-6" 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="p-4 rounded-full bg-green-500 dark:bg-green-600 shadow-neumorphic-light dark:shadow-neumorphic-dark text-white hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed transform scale-110">
        <svg class="w-8 h-8" 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="p-3 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-700 dark:text-gray-300 hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed">
        <svg class="w-6 h-6" 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>
</div>

<style>.shadow-neumorphic-light { box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff; } .dark .shadow-neumorphic-dark { box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #969696; } .shadow-inner-neumorphic-light { box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff; } .dark .shadow-inner-neumorphic-dark { box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #969696; } .hover\:shadow-neumorphic-light-pressed:hover { box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff; } .dark .hover\:shadow-neumorphic-dark-pressed:hover { box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #969696; }</style>

Composants associés

Lecteur audio rétro

Composant de lecteur audio avec design rétro/vintage, palette de couleurs pastel, complexité complexe, objectif des médias sociaux, réactif, prise en charge du thème sombre, HTML uniquement avec CSS Tailwind

Ouvrir

Lecteur audio monochromatique 3D

Composant de lecteur audio monochromatique 3D réactif pour portefeuille, avec prise en charge du mode sombre

Ouvrir

Composant de lecteur audio

Un composant de lecteur audio réactif conçu en mode sombre à l’aide de Tailwind CSS. Il prend en charge le thème sombre et fournit une interface propre pour la lecture audio.

Ouvrir