Composants Lecteur audio Lecteur audio Glassmorphism

Lecteur audio Glassmorphism

Lecteur audio Glassmorphism avec des couleurs vives pour le tableau de bord, réactif avec prise en charge du mode sombre. Pas de JavaScript.

Aperçu

HTML Code

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-200 via-pink-200 to-red-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4">
  <div class="bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-lg max-w-sm w-full border border-white border-opacity-20 dark:border-gray-600 dark:border-opacity-20">
    <div class="flex items-center space-x-4 mb-4">
      <img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/id/1040/80/80" alt="Album Art">
      <div class="flex-1">
        <h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300">Ocean Waves</h3>
        <p class="text-sm text-purple-700 dark:text-purple-300">Relaxation Sounds</p>
      </div>
    </div>
    <div class="relative mb-4">
      <div class="w-full bg-purple-200 rounded-full h-2 dark:bg-gray-600">
        <div class="bg-gradient-to-r from-indigo-500 to-pink-500 h-2 rounded-full" style="width: 70%;"></div>
      </div>
      <div class="flex justify-between text-xs text-purple-800 dark:text-purple-200 mt-1">
        <span>2:10</span>
        <span>3:05</span>
      </div>
    </div>
    <div class="flex items-center justify-center space-x-6">
      <button class="text-purple-800 dark:text-purple-200 focus:outline-none">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 5V.3c-4.9 1.1-8.5 5.7-8.5 11.2s3.6 10.1 8.5 11.2V19c-3.7 0-6.7-3-6.7-6.7S8.3 5.3 12 5zm0 14c3.9 0 7-3.1 7-7s-3.1-7-7-7v14zM16 12c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4z"></path>
        </svg>
      </button>
      <button class="bg-gradient-to-r from-indigo-600 to-pink-600 text-white p-3 rounded-full shadow-lg focus:outline-none transform hover:scale-105 transition duration-300">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
          <path d="M8 5v14l11-7z"></path>
        </svg>
      </button>
      <button class="text-purple-800 dark:text-purple-200 focus:outline-none">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 5V.3c-4.9 1.1-8.5 5.7-8.5 11.2s3.6 10.1 8.5 11.2V19c-3.7 0-6.7-3-6.7-6.7S8.3 5.3 12 5zm0 14c3.9 0 7-3.1 7-7s-3.1-7-7-7v14zM16 12c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4z"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

Composants associés

Memphis_Audio_Player_Component

Un composant de lecteur audio réactif inspiré du design de Memphis, avec des formes géométriques audacieuses et des couleurs neutres chaudes, avec prise en charge du mode sombre.

Ouvrir

Luxury_Medical_Audio_Player

Un composant de lecteur audio complexe, réactif et luxueux pour les applications de santé, doté d’une typographie sophistiquée, de palettes de couleurs raffinées (triadiques) et d’une prise en charge du mode sombre.

Ouvrir

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