Rechercher des composants

Catégories

Composants Lecteur audio

Lecteur audio

Interface pour la lecture de contenu audio

Retro_Vintage_Audio_Player_Social_Media

Un composant de lecteur audio d’inspiration rétro/vintage pour les médias sociaux, avec des neutres chauds, un design réactif et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-800 dark:to-stone-900 min-h-screen flex items-center justify-center font-mono">
  <div class="w-full max-w-sm rounded-xl shadow-2xl overflow-hidden
              bg-gradient-to-br from-stone-50 to-stone-200
              dark:from-stone-700 dark:to-stone-900
              p-6 space-y-6 border border-stone-300 dark:border-stone-600
              relative transform transition-all duration-300 hover:scale-105">

    <!-- Top Section: Header & User Info -->
    <div class="flex items-center justify-between">
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full border-2 border-stone-400 dark:border-stone-500 shadow-md"
             src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
        <div>
          <p class="text-sm font-bold text-stone-800 dark:text-stone-200">@SynthWaveSally</p>
          <p class="text-xs text-stone-600 dark:text-stone-400">Sharing a vibe...</p>
        </div>
      </div>
      <span class="text-stone-500 dark:text-stone-400 text-xs">3m ago</span>
    </div>

    <!-- Album Art & Track Info -->
    <div class="relative w-full aspect-square rounded-lg overflow-hidden shadow-lg border border-stone-300 dark:border-stone-600">
      <img class="w-full h-full object-cover" src="https://picsum.photos/400/400?grayscale&blur=2" alt="Album Art">
      <div class="absolute inset-0 bg-black bg-opacity-30 flex flex-col items-center justify-center p-4">
        <p class="text-xl font-extrabold text-white text-center drop-shadow-lg">Neon Dreams</p>
        <p class="text-sm text-stone-200 text-center mt-1 drop-shadow-md">The Retro Bandidos</p>
      </div>
    </div>

    <!-- Controls - Retro Buttons -->
    <div class="grid grid-cols-3 gap-3">
      <button aria-label="Previous Track" class="flex items-center justify-center p-3 rounded-full
                  bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300
                  shadow-md hover:shadow-lg transition-all duration-200
                  border border-stone-400 dark:border-stone-600
                  active:bg-stone-400 dark:active:bg-stone-600 group">
        <svg class="w-5 h-5 group-active:scale-90" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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 aria-label="Play/Pause" class="flex items-center justify-center p-4 rounded-full
                  bg-amber-400 dark:bg-amber-600 text-amber-900 dark:text-amber-100
                  shadow-xl hover:shadow-2xl transition-all duration-200
                  border border-amber-500 dark:border-amber-700
                  active:bg-amber-500 dark:active:bg-amber-700 group relative -top-1">
        <svg class="w-7 h-7 group-active:scale-90" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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 aria-label="Next Track" class="flex items-center justify-center p-3 rounded-full
                  bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300
                  shadow-md hover:shadow-lg transition-all duration-200
                  border border-stone-400 dark:border-stone-600
                  active:bg-stone-400 dark:active:bg-stone-600 group">
        <svg class="w-5 h-5 group-active:scale-90 scale-x-[-1]" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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>
    </div>

    <!-- Progress Bar (Fake) -->
    <div class="w-full bg-stone-300 dark:bg-stone-700 rounded-full h-2.5 relative shadow-inner overflow-hidden">
      <div class="bg-amber-400 dark:bg-amber-500 h-2.5 rounded-full" style="width: 65%;"></div>
      <div class="absolute top-1/2 -mt-2 left-[65%] transform -translate-x-1/2 w-4 h-4 rounded-full bg-amber-600 dark:bg-amber-400 shadow-md border-2 border-stone-100 dark:border-stone-800"></div>
    </div>
    <div class="flex justify-between text-xs text-stone-600 dark:text-stone-400">
      <span>0:45</span>
      <span>3:10</span>
    </div>

    <!-- Action Buttons -->
    <div class="flex justify-around pt-2 border-t border-stone-300 dark:border-stone-700">
      <button aria-label="Like" class="flex items-center space-x-2 text-stone-600 dark:text-stone-400 hover:text-red-500 dark:hover:text-red-400">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"></path></svg>
        <span class="text-sm">1.2K</span>
      </button>
      <button aria-label="Comment" class="flex items-center space-x-2 text-stone-600 dark:text-stone-400 hover:text-blue-500 dark:hover:text-blue-400">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path></svg>
        <span class="text-sm">345</span>
      </button>
      <button aria-label="Share" class="flex items-center space-x-2 text-stone-600 dark:text-stone-400 hover:text-green-500 dark:hover:text-green-400">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M18 16.08c-.76 0-1.44.3-1.96.79l-4.71-2.91c.07-.22.11-.45.11-.69s-.04-.47-.11-.69l4.71-2.91c.52.49 1.2.79 1.96.79 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.11.69l-4.71 2.91c-.52-.49-1.2-.79-1.96-.79-1.66 0-3 1.34-3 3s1.34 3 3 3c.76 0 1.44-.3 1.96-.79l4.71 2.91c-.07.22-.11.45-.11.69s.04.47.11.69l-4.71 2.91c-.52-.49-1.2-.79-1.96-.79-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3c0-.24-.04-.47-.11-.69l4.71-2.91c.52.49 1.2.79 1.96.79 1.66 0 3-1.34 3-3s-1.34-3-3-3z"></path></svg>
        <span class="text-sm">123</span>
      </button>
    </div>

    <!-- Vintage Speaker Grille Detail -->
    <div class="absolute bottom-0 left-0 right-0 h-4 bg-stone-300 dark:bg-stone-700 border-t border-stone-400 dark:border-stone-600
                flex justify-around items-center rounded-b-xl px-2">
      <div class="w-1.5 h-1.5 bg-stone-500 dark:bg-stone-500 rounded-full"></div>
      <div class="w-1.5 h-1.5 bg-stone-500 dark:bg-stone-500 rounded-full"></div>
      <div class="w-1.5 h-1.5 bg-stone-500 dark:bg-stone-500 rounded-full"></div>
      <div class="w-1.5 h-1.5 bg-stone-500 dark:bg-stone-500 rounded-full"></div>
      <div class="w-1.5 h-1.5 bg-stone-500 dark:bg-stone-500 rounded-full"></div>
      <div class="w-1.5 h-1.5 bg-stone-500 dark:bg-stone-500 rounded-full"></div>
    </div>

  </div>
</div>

Glassmorphism, composant du lecteur audio

Un composant de lecteur audio complexe, conçu pour les interfaces industrielles/industrielles, avec des couleurs à contraste élevé, une réactivité totale et une prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-900 to-gray-900 dark:from-gray-900 dark:to-black p-4">
  <div class="w-full max-w-sm md:max-w-md lg:max-w-lg xl:max-w-xl mx-auto rounded-3xl p-6 md:p-8 lg:p-10 shadow-2xl relative overflow-hidden backdrop-filter backdrop-blur-lg border border-opacity-30 border-white dark:border-opacity-30 dark:border-gray-700" style="background-color: rgba(255, 255, 255, 0.08); dark:background-color: rgba(0, 0, 0, 0.2);">
    <!-- Background elements for glassmorphism effect -->
    <div class="absolute top-0 right-0 w-32 h-32 bg-blue-500 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob dark:bg-purple-700"></div>
    <div class="absolute bottom-0 left-0 w-32 h-32 bg-green-500 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-2000 dark:bg-orange-700"></div>
    <div class="absolute top-1/4 left-1/4 w-32 h-32 bg-yellow-500 rounded-full mix-blend-multiply filter blur-xl opacity-30 animate-blob animation-delay-4000 dark:bg-pink-700"></div>

    <div class="relative z-10 text-white text-center">
      <h2 class="text-2xl md:text-3xl font-extrabold mb-2 uppercase tracking-wide text-white dark:text-gray-100 drop-shadow-lg">Industrial Audio Feed</h2>
      <p class="text-sm md:text-base text-gray-200 dark:text-gray-400 mb-6 drop-shadow-md">Monitoring system broadcasts</p>

      <!-- Album Art / Waveform Placeholder -->
      <div class="w-full h-48 md:h-64 bg-gray-700 bg-opacity-40 rounded-2xl mb-8 flex items-center justify-center overflow-hidden shadow-inner-lg shadow-black/30 dark:shadow-gray-900/50">
        <img src="https://picsum.photos/400/300?random=1" alt="Industrial Sound Wave" class="object-cover w-full h-full opacity-70 blur-sm brightness-75 md:opacity-80 md:blur-none md:brightness-100" aria-hidden="true">
        <div class="absolute w-4/5 h-20 bg-gradient-to-r from-transparent via-blue-500/60 to-transparent rounded-full opacity-60 md:opacity-80" style="box-shadow: 0 0 15px rgba(59, 130, 246, 0.7);"></div>
        <div class="absolute text-white text-3xl md:text-4xl font-bold tracking-wider opacity-90 drop-shadow-lg">
          <span class="uppercase">Live Feed</span>
        </div>
      </div>

      <!-- Track Info -->
      <div class="mb-6">
        <h3 class="text-xl md:text-2xl font-bold mb-1 text-white dark:text-gray-100 drop-shadow-lg">Turbine Gen 5 Status</h3>
        <p class="text-md md:text-lg text-gray-300 dark:text-gray-400 drop-shadow-md">Sector 7 - Control Room</p>
      </div>

      <!-- Progress Bar -->
      <div class="w-full mb-6">
        <div class="h-2 bg-white bg-opacity-20 rounded-full drop-shadow-sm">
          <div class="h-full bg-blue-500 rounded-full w-3/4 shadow-md" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" aria-label="Playback progress"></div>
        </div>
        <div class="flex justify-between text-xs mt-2 text-gray-300 dark:text-gray-400">
          <span>02:45</span>
          <span>03:20</span>
        </div>
      </div>

      <!-- Controls -->
      <div class="flex justify-around items-center mb-6">
        <button class="p-3 md:p-4 rounded-full bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm hover:bg-opacity-20 transition-all duration-300 shadow-lg text-blue-300 md:text-blue-200 dark:text-blue-500 hover:text-blue-100 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" aria-label="Previous track">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-7 md:w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M11 19l-7-7 7-7m8 14l-7-7 7-7" />
          </svg>
        </button>
        <button class="p-4 md:p-5 rounded-full bg-blue-600 bg-opacity-70 backdrop-filter backdrop-blur-sm hover:bg-opacity-90 transition-all duration-300 shadow-2xl text-white dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-70" aria-label="Play/Pause">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 md:h-10 md:w-10" fill="currentColor" viewBox="0 0 24 24" stroke="currentColor" stroke-width="0">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14.73 5.485c-.975-1.077-2.73-1.077-3.705 0l-4.5 4.975c-.975 1.077-.975 2.828 0 3.905l4.5 4.975c.975 1.077 2.73 1.077 3.705 0l4.5-4.975c.975-1.077.975-2.828 0-3.905l-4.5-4.975z" />
          </svg>
        </button>
        <button class="p-3 md:p-4 rounded-full bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm hover:bg-opacity-20 transition-all duration-300 shadow-lg text-blue-300 md:text-blue-200 dark:text-blue-500 hover:text-blue-100 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" aria-label="Next track">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 md:h-7 md:w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M13 5l7 7-7 7m-8-14l7 7-7 7" />
          </svg>
        </button>
      </div>

      <!-- Volume Control and Settings -->
      <div class="flex items-center justify-between text-gray-300 dark:text-gray-400">
        <div class="flex items-center space-x-2">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.536 8.464A.999.999 0 0014 9H8a.999.999 0 00-.707 1.707L6 12l.707.707A.999.999 0 008 14h6a.999.999 0 001.536-.536l3.5-3.5a.999.999 0 000-1.414l-3.5-3.5z" />
          </svg>
          <input type="range" min="0" max="100" value="70" class="w-24 md:w-32 lg:w-40 h-1 rounded-full appearance-none outline-none bg-blue-400 transition-all duration-300" style="background: linear-gradient(to right, #60A5FA 70%, rgba(255,255,255,0.3) 70%);" aria-label="Volume slider">
        </div>
        <button class="p-2 rounded-full bg-white bg-opacity-10 backdrop-filter backdrop-blur-sm hover:bg-opacity-20 transition-all duration-300 shadow-lg text-blue-300 md:text-blue-200 dark:text-blue-500 hover:text-blue-100 dark:hover:text-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" aria-label="Audio settings">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 md:h-6 md:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
          </svg>
        </button>
      </div>

      <div class="mt-8 pt-4 border-t border-white border-opacity-10 dark:border-gray-700 text-sm italic text-gray-400 dark:text-gray-500 select-none">
        <p>System v3.1.2 | <span class="font-semibold">Online</span></p>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom CSS for range input thumb (for better glassmorphism integration) */
  input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #60A5FA; /* blue-400 */
    cursor: pointer;
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.7);
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }

  input[type='range']::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #60A5FA; /* blue-400 */
    cursor: pointer;
    box-shadow: 0 0 5px rgba(59, 130, 246, 0.7);
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  }

  input[type='range']:hover::-webkit-slider-thumb {
    background: #4B90F6; /* slightly darker blue */
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.9);
  }

  input[type='range']:hover::-moz-range-thumb {
    background: #4B90F6;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.9);
  }

  /* Keyframes for the blob animation */
  @keyframes blob {
    0% {
      transform: translate(0px, 0px) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
      transform: translate(0px, 0px) scale(1);
    }
  }

  .animate-blob {
    animation: blob 7s infinite cubic-bezier(0.6, -0.28, 0.735, 0.045);
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

</style>

Composant du lecteur audio Bauhaus

Un composant de lecteur audio complexe et réactif conçu selon les principes du Bauhaus pour les applications de sport/fitness, avec une base en noir et blanc avec une couleur d’accentuation frappante. Comprend les commandes de lecture, la barre de progression, le contrôle du volume, la liste des pistes et la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-4 sm:p-6 md:p-8 lg:p-10 flex items-center justify-center min-h-screen">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-xl rounded-none overflow-hidden border-2 border-gray-900 dark:border-gray-100 transition-all duration-300 ease-in-out">
    <!-- Header / Top Section -->
    <div class="flex items-center justify-between p-4 sm:p-6 bg-yellow-400 dark:bg-yellow-600 border-b-2 border-gray-900 dark:border-gray-100 relative">
      <h2 class="text-xl sm:text-2xl md:text-3xl font-extrabold text-gray-900 dark:text-gray-900 uppercase tracking-wider">
        Pro Workout Mix
      </h2>
      <button class="p-2 sm:p-3 bg-gray-900 dark:bg-gray-100 text-yellow-400 dark:text-yellow-600 border-2 border-gray-900 dark:border-gray-100 hover:scale-105 active:scale-95 transition-transform">
        <svg class="w-5 h-5 sm:w-6 sm:h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm0 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
      </button>
      <div class="absolute top-0 right-0 w-8 h-8 sm:w-10 sm:h-10 bg-gray-900 dark:bg-gray-100 -mr-1 -mt-1"></div>
    </div>

    <div class="grid md:grid-cols-3">
      <!-- Left Section: Album Art & Currently Playing -->
      <div class="md:col-span-1 p-4 sm:p-6 bg-gray-50 dark:bg-gray-700 border-b-2 md:border-b-0 md:border-r-2 border-gray-900 dark:border-gray-100 relative">
        <div class="aspect-w-1 aspect-h-1 mb-4 flex items-center justify-center bg-gray-300 dark:bg-gray-600 border-2 border-gray-900 dark:border-gray-100 relative group">
          <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="object-cover w-full h-full p-2 block filter grayscale transition-all duration-300 group-hover:grayscale-0 group-hover:p-0">
          <div class="absolute top-0 left-0 w-full h-full border-4 border-yellow-400 dark:border-yellow-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
          <div class="absolute top-0 left-0 w-full h-full bg-yellow-400 dark:bg-yellow-600 opacity-10 group-hover:opacity-0 transition-opacity duration-300"></div>
        </div>
        <div class="text-center">
          <p class="text-lg sm:text-xl font-bold uppercase text-gray-900 dark:text-gray-100 mb-1">Push It To The Limit</p>
          <p class="text-sm sm:text-base text-gray-700 dark:text-gray-300">Turbo Beats Feat. Fitness Flow</p>
        </div>
        <div class="absolute bottom-0 right-0 w-6 h-6 sm:w-8 sm:h-8 bg-gray-900 dark:bg-gray-100 -mr-1 -mb-1"></div>
      </div>

      <!-- Middle Section: Controls & Progress -->
      <div class="md:col-span-2 p-4 sm:p-6 bg-gray-100 dark:bg-gray-800 relative">

        <!-- Progress Bar -->
        <div class="w-full mb-6 relative">
          <div class="h-2 bg-gray-300 dark:bg-gray-700 border border-gray-900 dark:border-gray-100 relative">
            <div class="absolute h-full bg-yellow-400 dark:bg-yellow-600" style="width: 60%;"></div>
            <div class="absolute -mt-1 -ml-1 h-4 w-4 bg-gray-900 dark:bg-gray-100 border-2 border-yellow-400 dark:border-yellow-600" style="left: 60%; transform: translateX(-50%);"></div>
          </div>
          <div class="flex justify-between text-xs mt-2 text-gray-700 dark:text-gray-300">
            <span>2:35</span>
            <span>-1:45</span>
          </div>
        </div>

        <!-- Main Controls -->
        <div class="flex justify-center items-center space-x-4 sm:space-x-6 mb-8">

          <button class="p-3 sm:p-4 bg-gray-900 dark:bg-gray-100 text-yellow-400 dark:text-yellow-600 border-2 border-gray-900 dark:border-gray-100 hover:scale-110 active:scale-90 transition-transform relative group">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.793 4.793a1 1 0 011.414 0L10 8.586l3.793-3.793a1 1 0 111.414 1.414L11.414 10l3.793 3.793a1 1 0 01-1.414 1.414L10 11.414l-3.793 3.793a1 1 0 01-1.414-1.414L8.586 10 4.793 6.207a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
            <span class="absolute top-0 left-0 w-full h-full border-1 border-yellow-400 dark:border-yellow-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>

          <button class="p-3 sm:p-4 bg-gray-900 dark:bg-gray-100 text-yellow-400 dark:text-yellow-600 border-2 border-gray-900 dark:border-gray-100 hover:scale-110 active:scale-90 transition-transform relative group">
            <svg class="w-6 h-6 sm:w-8 sm: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.832L12.744 10l-3.189-2.832z" clip-rule="evenodd"></path></svg>
             <span class="absolute top-0 left-0 w-full h-full border-1 border-yellow-400 dark:border-yellow-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>

          <button class="p-3 sm:p-4 bg-gray-900 dark:bg-gray-100 text-yellow-400 dark:text-yellow-600 border-2 border-gray-900 dark:border-gray-100 hover:scale-110 active:scale-90 transition-transform relative group">
            <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M15.207 4.793a1 1 0 010 1.414L11.414 10l3.793 3.793a1 1 0 01-1.414 1.414L10 11.414l-3.793 3.793a1 1 0 01-1.414-1.414L8.586 10 4.793 6.207a1 1 0 011.414-1.414L10 8.586l3.793-3.793a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
             <span class="absolute top-0 left-0 w-full h-full border-1 border-yellow-400 dark:border-yellow-600 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
          </button>
        </div>

        <!-- Volume Control -->
        <div class="flex items-center justify-center space-x-2 text-gray-700 dark:text-gray-300 mb-6">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.383 5.498a1 1 0 10-1.766-.996L4 7H3a2 2 0 00-2 2v2a2 2 0 002 2h1l3.617 1.502a1 1 0 101.766-.996L6.853 10l2.53-1.055zM14.004 7.253a1 1 0 00-1.748-.686 4.002 4.002 0 010 6.866 1 1 0 001.748-.686 2.002 2.002 0 000-3.494z" clip-rule="evenodd"></path></svg>
          <input type="range" class="w-32 bg-gray-300 dark:bg-gray-700 h-2 accent-yellow-400 dark:accent-yellow-600 border border-gray-900 dark:border-gray-100 outline-none hover:outline-none focus:outline-none" value="70">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.383 5.498a1 1 0 10-1.766-.996L4 7H3a2 2 0 00-2 2v2a2 2 0 002 2h1l3.617 1.502a1 1 0 101.766-.996L6.853 10l2.53-1.055zM14.004 7.253a1 1 0 00-1.748-.686 4.002 4.002 0 010 6.866 1 1 0 001.748-.686 2.002 2.002 0 000-3.494zM16.924 3.078a1 1 0 00-1.088 1.636 7.004 7.004 0 010 10.572 1 1 0 001.088 1.636 9.004 9.004 0 000-13.844z" clip-rule="evenodd"></path></svg>
        </div>

        <div class="absolute bottom-0 left-0 w-8 h-8 sm:w-10 sm:h-10 bg-gray-900 dark:bg-gray-100 -ml-1 -mb-1"></div>
      </div>

      <!-- Right Section: Track List -->
      <div class="md:col-span-3 p-4 sm:p-6 bg-gray-50 dark:bg-gray-700 border-t-2 border-gray-900 dark:border-gray-100 relative">
        <h3 class="text-lg sm:text-xl font-bold uppercase text-gray-900 dark:text-gray-100 mb-4">
          Playlist Tracks
        </h3>
        <ul class="space-y-3">
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-yellow-400 dark:hover:border-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">01</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Push It To The Limit</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">Turbo Beats Feat. Fitness Flow</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">4:20</span>
          </li>
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-r-yellow-400 dark:hover:border-r-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">02</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Adrenaline Rush Zone</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">Synth Pulse</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">3:55</span>
          </li>
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-r-yellow-400 dark:hover:border-r-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">03</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Endurance Max</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">Power Drifters</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">5:10</span>
          </li>
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-r-yellow-400 dark:hover:border-r-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">04</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Beat Drop Blitz</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">Rhythmic Force Inc.</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">3:40</span>
          </li>
          <li class="flex items-center space-x-3 p-2 border-2 border-transparent hover:border-r-yellow-400 dark:hover:border-r-yellow-600 transition-colors duration-200 cursor-pointer group">
            <span class="text-sm text-gray-700 dark:text-gray-300 w-6 font-semibold flex-shrink-0">05</span>
            <div class="flex-grow">
              <p class="font-medium text-gray-900 dark:text-gray-100 group-hover:text-yellow-400 dark:group-hover:text-yellow-600">Victory Lap Anthem</p>
              <p class="text-xs text-gray-600 dark:text-gray-400">The Finish Line Project</p>
            </div>
            <span class="text-xs text-gray-500 dark:text-gray-400 flex-shrink-0">4:50</span>
          </li>
        </ul>
        <div class="absolute top-0 left-0 w-8 h-8 sm:w-10 sm:h-10 bg-gray-900 dark:bg-gray-100 -ml-1 -mt-1"></div>
      </div>
    </div>
  </div>
</div>

3D_Forest_Audio_Player

Un composant de lecteur audio réactif avec des éléments de conception 3D, utilisant une palette de couleurs forêt/vert, adapté aux plates-formes éducatives prenant en charge le mode sombre.

Ouvrir Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-emerald-50 to-green-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 lg:p-8">
  <div class="w-full max-w-sm md:max-w-md lg:max-w-xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform perspective-1000 rotateX-3 rotateY-2 transition-all duration-300 ease-in-out hover:rotateX-0 hover:rotateY-0 border-t border-l border-green-200 dark:border-green-700 bg-gradient-to-br from-green-50/50 to-emerald-50/50 dark:from-gray-800/50 dark:to-gray-900/50" style="transform-style: preserve-3d; perspective: 1000px;">
    <div class="p-6 md:p-8 lg:p-10 relative">
      <!-- Top '3D' Bevel -->
      <div class="absolute inset-0 bg-gradient-to-br from-green-500/20 to-emerald-600/20 dark:from-green-700/20 dark:to-emerald-800/20 rounded-3xl" style="transform: translateZ(-50px);"></div>

      <div class="relative z-10">
        <!-- Header -->
        <div class="flex items-center justify-between mb-6">
          <span class="text-xs md:text-sm uppercase tracking-wider text-green-700 dark:text-green-300 font-bold">Lesson Audio</span>
          <button class="p-2 rounded-full text-green-600 dark:text-green-400 hover:bg-green-100 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
          </button>
        </div>

        <!-- Album Art / Thumbnail -->
        <div class="relative w-full aspect-video rounded-xl overflow-hidden shadow-lg mb-6 transform translateZ(20px)">
          <img src="https://picsum.photos/600/350?random=1" alt="Course Thumbnail" class="absolute inset-0 w-full h-full object-cover rounded-xl transition-transform duration-300 ease-in-out hover:scale-105">
          <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent rounded-xl"></div>
          <div class="absolute bottom-4 left-4 right-4 text-white">
            <h3 class="text-lg md:text-xl font-bold mb-1 drop-shadow-md">Understanding Photosynthesis</h3>
            <p class="text-sm text-gray-200 drop-shadow-sm">Biology Basics - Chapter 3</p>
          </div>
        </div>

        <!-- Controls and Progress Bar -->
        <div class="mb-6">
          <div class="flex justify-between items-center text-sm font-medium text-green-800 dark:text-green-200 mb-2">
            <span>1:23</span>
            <span>-3:45</span>
          </div>
          <div class="w-full bg-green-200 dark:bg-green-700 rounded-full h-2.5 relative transform translateZ(10px)">
            <div class="bg-green-500 dark:bg-green-400 h-2.5 rounded-full" style="width: 30%;"></div>
            <div class="absolute -top-0.5 left-[calc(30%-8px)] w-4 h-4 bg-white dark:bg-gray-800 rounded-full shadow-md border-2 border-green-500 dark:border-green-400 transform translateZ(5px)"></div>
          </div>
        </div>

        <div class="flex items-center justify-around mb-6 space-x-2">
          <button class="p-3 md:p-4 rounded-full text-green-600 dark:text-green-400 bg-green-100 dark:bg-gray-700 shadow-md hover:scale-105 active:scale-95 transition-all duration-200 transform translateZ(15px)">
            <svg class="w-6 h-6 md:w-7 md:h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12c0 2.21.817 4.218 2.155 5.74M15 9V3M9 15v6"></path></svg>
          </button>
          <button class="p-3 md:p-4 rounded-full text-green-600 dark:text-green-400 bg-green-100 dark:bg-gray-700 shadow-md hover:scale-105 active:scale-95 transition-all duration-200 transform translateZ(15px)">
            <svg class="w-6 h-6 md:w-7 md:h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7"></path></svg>
          </button>
          <button class="p-4 md:p-5 lg:p-6 rounded-full bg-green-500 dark:bg-green-600 text-white shadow-xl hover:scale-110 active:scale-90 transition-all duration-300 transform translateZ(25px) border-4 border-green-300 dark:border-green-500/50">
            <svg class="w-8 h-8 md:w-9 md:h-9" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><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 md:p-4 rounded-full text-green-600 dark:text-green-400 bg-green-100 dark:bg-gray-700 shadow-md hover:scale-105 active:scale-95 transition-all duration-200 transform translateZ(15px)">
            <svg class="w-6 h-6 md:w-7 md:h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"></path></svg>
          </button>
          <button class="p-3 md:p-4 rounded-full text-green-600 dark:text-green-400 bg-green-100 dark:bg-gray-700 shadow-md hover:scale-105 active:scale-95 transition-all duration-200 transform translateZ(15px)">
            <svg class="w-6 h-6 md:w-7 md:h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.746 12C12.9 8.7 10.6 5.4 8.7 2.1m-2.1 6.6c-1.3 2.1-2.6 4.2-3.9 6.3M21 12c-1.8 3.3-4.1 6.6-6 9.9m-2.1-6.6c1.3-2.1 2.6-4.2 3.9-6.3M12 12a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
          </button>
        </div>

        <!-- More Info -->
        <div class="flex items-center space-x-4 bg-green-50 dark:bg-gray-700 p-4 rounded-xl shadow-inner transform translateZ(10px) border border-green-200 dark:border-gray-600">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Instructor" class="w-12 h-12 rounded-full object-cover shadow-md">
          <div>
            <p class="text-sm font-semibold text-green-900 dark:text-green-100">Taught by Dr. Elara Vance</p>
            <p class="text-xs text-green-700 dark:text-green-300">Botanist & Environmental Scientist</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Lecteur audio Memphis Earth-toned

Un composant de lecteur audio modérément complexe conçu dans un style inspiré de Memphis avec une palette de couleurs terre, adapté à la documentation ou aux sites wiki. Présente des formes géométriques audacieuses, des motifs ludiques et une réactivité totale avec la prise en charge du mode sombre.

Ouvrir Aperçu

                <div class="p-4 sm:p-6 lg:p-8 bg-amber-100 dark:bg-zinc-800 transition-colors duration-300 min-h-screen flex items-center justify-center font-sans">
  <div class="relative w-full max-w-sm sm:max-w-md md:max-w-lg lg:max-w-xl mx-auto rounded-3xl overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 ease-in-out
              bg-gradient-to-br from-amber-200 to-yellow-300 dark:from-zinc-700 dark:to-zinc-900
              border-4 border-amber-500 dark:border-zinc-500">

    <!-- Memphis Pattern Background -->
    <div class="absolute inset-0 z-0 opacity-20 dark:opacity-10 pointer-events-none">
      <svg class="w-full h-full" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice">
        <defs>
          <pattern id="memphis-pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
            <rect x="0" y="0" width="10" height="10" fill="#6b4e4e" class="dark:fill-zinc-600" />
            <circle cx="15" cy="5" r="3" fill="#a0522d" class="dark:fill-zinc-400" />
            <rect x="5" y="10" width="10" height="7" fill="#d2b48c" class="dark:fill-zinc-500" />
            <path d="M0 0 L10 20 L20 0 Z" fill="#7f5539" class="dark:fill-zinc-700" />
          </pattern>
        </defs>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#memphis-pattern)" />
      </svg>
    </div>

    <!-- Player Content -->
    <div class="relative z-10 p-6 sm:p-8 lg:p-10 flex flex-col items-center space-y-6 sm:space-y-8">

      <!-- Top Section: Album Art & Info -->
      <div class="flex flex-col sm:flex-row items-center sm:items-start text-center sm:text-left w-full space-y-4 sm:space-y-0 sm:space-x-6">
        <div class="relative w-32 h-32 sm:w-40 sm:h-40 flex-shrink-0 rounded-tl-3xl rounded-br-3xl overflow-hidden shadow-lg border-4 border-amber-600 dark:border-zinc-600 transition-all duration-300">
          <img src="https://picsum.photos/300/300?random=1" alt="Album Art" class="w-full h-full object-cover transition-transform duration-300 hover:scale-105">
          <div class="absolute bottom-0 right-0 p-2 bg-amber-600 dark:bg-zinc-600 text-amber-50 dark:text-zinc-50 text-xs font-semibold rounded-tl-lg shadow-md">Live</div>
        </div>
        <div class="flex flex-col flex-grow mt-2 sm:mt-0">
          <p class="text-xs sm:text-sm text-amber-900 dark:text-zinc-300 font-semibold mb-1 uppercase tracking-wider">Now Playing</p>
          <h3 class="text-2xl sm:text-3xl font-extrabold text-amber-800 dark:text-zinc-100 leading-tight mb-2">
            The Earth's Embrace
          </h3>
          <p class="text-lg sm:text-xl text-amber-700 dark:text-zinc-200 font-medium">
            <span class="block sm:inline-block">By </span>
            <span class="font-semibold border-b-2 border-dashed border-amber-600 dark:border-zinc-400 pb-0.5">Gaia Echoes</span>
          </p>
        </div>
      </div>

      <!-- Progress Bar -->
      <div class="w-full flex items-center space-x-3 mt-6">
        <span class="text-amber-800 dark:text-zinc-200 text-sm font-medium">0:45</span>
        <div class="flex-grow h-3 bg-amber-400 dark:bg-zinc-600 rounded-full overflow-hidden relative shadow-inner">
          <div class="h-full w-[45%] bg-amber-700 dark:bg-zinc-400 rounded-full relative">
            <div class="absolute -right-2 top-1/2 -translate-y-1/2 w-4 h-4 bg-amber-900 dark:bg-zinc-100 rounded-full shadow-md border-2 border-amber-500 dark:border-zinc-500"></div>
          </div>
        </div>
        <span class="text-amber-800 dark:text-zinc-200 text-sm font-medium">3:20</span>
      </div>

      <!-- Controls -->
      <div class="w-full flex justify-around items-center text-amber-900 dark:text-zinc-200 mt-6 pt-4 border-t-2 border-dashed border-amber-500 dark:border-zinc-500">
        <button class="p-3 sm:p-4 rounded-full bg-amber-300 dark:bg-zinc-700 shadow-md transform transition-all duration-200 hover:scale-110 active:scale-95
                       border-2 border-amber-500 dark:border-zinc-500 focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-zinc-500/50">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
        </button>
        <button class="p-4 sm:p-5 rounded-full bg-amber-500 dark:bg-zinc-400 text-amber-50 dark:text-zinc-900 shadow-lg transform transition-all duration-200 hover:scale-110 active:scale-95
                       border-2 border-amber-700 dark:border-zinc-300 focus:outline-none focus:ring-4 focus:ring-amber-700/50 dark:focus:ring-zinc-300/50">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
        </button>
        <button class="p-3 sm:p-4 rounded-full bg-amber-300 dark:bg-zinc-700 shadow-md transform transition-all duration-200 hover:scale-110 active:scale-95
                       border-2 border-amber-500 dark:border-zinc-500 focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-zinc-500/50">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="currentColor"><path d="M16 18h2V6h-2zM6 18l8.5-6L6 6z"/></svg>
        </button>
      </div>

      <!-- Volume and Settings -->
      <div class="w-full flex justify-between items-center mt-6 pt-4 border-t-2 border-dashed border-amber-500 dark:border-zinc-500">
        <div class="flex items-center space-x-2 text-amber-800 dark:text-zinc-200">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M14 3.23c-.27-.2-.59-.3-.92-.3h-3.85c-.91 0-1.7.55-2.06 1.47L2 12l5.17 7.37c.36.92 1.15 1.47 2.06 1.47h3.85c.33 0 .65-.11.92-.3L22 12 14 3.23zm-.12 1.42L20 12l-7.12 7.35-.13-.13V4.65z"/></svg>
          <input type="range" class="w-24 sm:w-32 h-2 rounded-full bg-amber-400 dark:bg-zinc-600 appearance-none cursor-pointer
                                    [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:bg-amber-700 dark:[&::-webkit-slider-thumb]:bg-zinc-400 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:-mt-1.5 [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-amber-500 dark:[&::-webkit-slider-thumb]:border-zinc-500 [&::-webkit-slider-thumb]:appearance-none
                                    [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:bg-amber-700 dark:[&::-moz-range-thumb]:bg-zinc-400 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:shadow-md [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-amber-500 dark:[&::-moz-range-thumb]:border-zinc-500">
        </div>
        <button class="p-2 sm:p-3 rounded-full bg-amber-300 dark:bg-zinc-700 text-amber-900 dark:text-zinc-200 shadow-md transform transition-all duration-200 hover:scale-105 active:scale-95
                       border-2 border-amber-500 dark:border-zinc-500 focus:outline-none focus:ring-4 focus:ring-amber-500/50 dark:focus:ring-zinc-500/50">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
        </button>
      </div>

    </div>
  </div>
</div>

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 Aperçu

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-indigo-50 to-purple-100 dark:from-gray-900 dark:to-gray-800 p-4 sm:p-6 md:p-8 font-serif">
  <div class="w-full max-w-2xl bg-white dark:bg-gray-800 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.01] border border-gray-100 dark:border-gray-700">
    <div class="p-6 sm:p-8 md:p-10">
      <div class="flex flex-col sm:flex-row items-center sm:items-start space-y-6 sm:space-y-0 sm:space-x-8">
        <div class="flex-shrink-0 w-32 h-32 sm:w-40 sm:h-40 md:w-52 md:h-52 rounded-2xl overflow-hidden shadow-lg border border-gray-200 dark:border-gray-600 group relative">
          <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="w-full h-full object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500 ease-in-out" loading="lazy">
          <div class="absolute inset-0 bg-gradient-to-br from-indigo-600/70 via-purple-600/70 to-pink-600/70 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
            <p class="text-white text-xs text-center font-medium opacity-0 group-hover:opacity-100 transition-opacity duration-500 delay-150">Therapeutic Sounds</p>
          </div>
        </div>

        <div class="flex-grow text-center sm:text-left">
          <h3 class="text-lg sm:text-xl md:text-2xl font-bold tracking-tight text-gray-900 dark:text-white capitalize leading-snug mb-1 sm:mb-2">
            Mindfulness Meditation for Stress Relief
          </h3>
          <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 font-medium opacity-90 mb-3 sm:mb-4 px-2 sm:px-0">
            Dr. Eleanor Vance, Clinical Psychologist
          </p>
          <div class="flex items-center justify-center sm:justify-start space-x-2 text-gray-500 dark:text-gray-400 text-xs sm:text-sm opaciy-80">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m12.728 0l-.707.707M6 18H4a2 2 0 01-2-2V8.307l2.748 1.924A2 2 0 007.5 9h10a2 2 0 011.5 1.076L22 8.307V16a2 2 0 01-2 2h-2M15 9V7a2 2 0 00-2-2H9a2 2 0 00-2 2v2m10 5a2 2 0 01-2 2H7a2 2 0 01-2-2v-2a2 2 0 012-2h6a2 2 0 012 2v2z"></path></svg>
            <span>Session 1 of 5</span>
            <span class="h-1 w-1 bg-gray-400 dark:bg-gray-500 rounded-full"></span>
            <span>30 min</span>
          </div>
        </div>
      </div>

      <div class="mt-8">
        <div class="relative h-1 w-full bg-gray-200 dark:bg-gray-700 rounded-full">
          <div class="absolute top-0 left-0 h-1 bg-gradient-to-r from-indigo-500 to-purple-500 dark:from-indigo-400 dark:to-purple-400 rounded-full" style="width: 45%;"></div>
          <div class="absolute top-1/2 -mt-2 -ml-2 w-4 h-4 bg-purple-600 dark:bg-purple-500 rounded-full shadow-lg cursor-pointer transform -translate-x-1/2" style="left: 45%;"></div>
        </div>
        <div class="flex justify-between text-xs sm:text-sm text-gray-600 dark:text-gray-400 mt-2 font-medium opacity-80">
          <span>0:14</span>
          <span>29:46</span>
        </div>
      </div>

      <div class="flex items-center justify-center space-x-6 sm:space-x-8 mt-6 sm:mt-8">
        <button class="p-3 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18"></path></svg>
        </button>
        <button class="p-2 sm:p-3 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 dark:from-indigo-600 dark:to-purple-700 text-white shadow-lg transform hover:scale-110 active:scale-95 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-purple-700">
          <svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a.75.75 0 01-.75-.75V6.75a.75.75 0 011.5 0v10.5a.75.75 0 01-.75.75zM14.25 18a.75.75 0 01-.75-.75V6.75a.75.75 0 011.5 0v10.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg>
        </button>
        <button class="p-3 rounded-full text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-800">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </button>
      </div>

      <div class="mt-8 border-t border-gray-100 dark:border-gray-700 pt-6 sm:pt-8">
        <h4 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-white mb-4 opacity-95">Upcoming Sessions</h4>
        <ul class="space-y-4">
          <li class="flex items-center justify-between group cursor-pointer p-4 -mx-4 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
            <div class="flex items-center space-x-4">
              <div class="flex-shrink-0 w-10 h-10 rounded-lg overflow-hidden relative">
                <img src="https://picsum.photos/100/100?random=2" alt="Session Art" class="w-full h-full object-cover" loading="lazy">
                <div class="absolute inset-0 bg-yellow-500 opacity-20"></div>
              </div>
              <div>
                <p class="text-sm font-medium text-gray-800 dark:text-white group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors leading-tight">Breathing Exercises for Anxiety</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Dr. Eleanor Vance • 25 min</p>
              </div>
            </div>
            <button class="p-2 text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 opacity-0 group-hover:opacity-100 transition-opacity duration-200 focus:outline-none">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
            </button>
          </li>
          <li class="flex items-center justify-between group cursor-pointer p-4 -mx-4 rounded-xl hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-200">
            <div class="flex items-center space-x-4">
              <div class="flex-shrink-0 w-10 h-10 rounded-lg overflow-hidden relative">
                <img src="https://picsum.photos/100/100?random=3" alt="Session Art" class="w-full h-full object-cover" loading="lazy">
                <div class="absolute inset-0 bg-pink-500 opacity-20"></div>
              </div>
              <div>
                <p class="text-sm font-medium text-gray-800 dark:text-white group-hover:text-purple-600 dark:group-hover:text-purple-400 transition-colors leading-tight">Guided Imagery for Pain Management</p>
                <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Dr. Eleanor Vance • 40 min</p>
              </div>
            </div>
            <button class="p-2 text-gray-500 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 opacity-0 group-hover:opacity-100 transition-opacity duration-200 focus:outline-none">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
            </button>
          </li>
        </ul>
      </div>

    </div>
  </div>
</div>

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.

Ouvrir Aperçu

                <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>

Composant de lecteur audio

Composant de lecteur audio Glassmorphism complexe pour les médias sociaux avec schéma de couleurs triadique, conception réactive et prise en charge du thème sombre.

Ouvrir Aperçu

                <div class="min-h-screen bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900 dark:from-gray-900 dark:via-gray-800 dark:to-black p-8 flex items-center justify-center">
  <div class="relative w-full max-w-xl bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-3xl shadow-xl border border-white border-opacity-20 dark:border-gray-700 p-8 space-y-8 overflow-hidden">
    <div class="absolute inset-0 top-0 left-0 bg-gradient-to-br from-teal-400 to-cyan-600 rounded-full w-48 h-48 opacity-30 blur-2xl animate-blob"></div>
    <div class="absolute inset-0 bottom-0 right-0 bg-gradient-to-br from-fuchsia-500 to-purple-600 rounded-full w-48 h-48 opacity-30 blur-2xl animate-blob animation-delay-2000"></div>
    <div class="absolute inset-0 top-1/2 left-1/2 bg-gradient-to-br from-lime-400 to-green-500 rounded-full w-48 h-48 opacity-30 blur-2xl animate-blob animation-delay-4000"></div>

    <!-- Header -->
    <div class="text-center text-white relative z-10">
      <h2 class="text-3xl font-extrabold mb-2 drop-shadow-lg">Now Playing</h2>
      <p class="text-lg opacity-80">Smooth listening, anytime, anywhere.</p>
    </div>

    <!-- Album Art and Song Info -->
    <div class="flex flex-col items-center space-y-6 relative z-10">
      <div class="w-48 h-48 rounded-2xl overflow-hidden shadow-2xl border-4 border-white border-opacity-30 transform hover:scale-105 transition duration-300">
        <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="w-full h-full object-cover">
      </div>
      <div class="text-center text-white">
        <h3 class="text-2xl font-bold mb-1 drop-shadow-lg">Dreamscape Echoes</h3>
        <p class="text-md opacity-80">Vocalist Name & Band Name</p>
      </div>
    </div>

    <!-- Progress Bar -->
    <div class="relative z-10">
      <div class="h-2 bg-white bg-opacity-30 rounded-full">
        <div class="h-full bg-gradient-to-r from-teal-400 to-cyan-600 rounded-full w-2/5"></div>
      </div>
      <div class="flex justify-between text-white text-sm mt-2 opacity-80">
        <span>1:45</span>
        <span>3:20</span>
      </div>
    </div>

    <!-- Controls -->
    <div class="flex justify-center space-x-8 text-white text-3xl relative z-10">
      <button class="relative group p-3 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition duration-300 transform hover:scale-110 backdrop-filter backdrop-blur-lg shadow-lg border border-white border-opacity-30">
        <i class="fas fa-backward"></i>
        <span class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-3 py-1 bg-gray-800 text-white text-xs rounded-full opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Previous</span>
      </button>
      <button class="relative group p-4 rounded-full bg-gradient-to-br from-teal-400 to-cyan-600 hover:from-teal-500 hover:to-cyan-700 transition duration-300 transform hover:scale-110 shadow-lg border border-white border-opacity-30 text-4xl">
        <i class="fas fa-play"></i>
        <span class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-3 py-1 bg-gray-800 text-white text-xs rounded-full opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Play</span>
      </button>
      <button class="relative group p-3 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition duration-300 transform hover:scale-110 backdrop-filter backdrop-blur-lg shadow-lg border border-white border-opacity-30">
        <i class="fas fa-forward"></i>
        <span class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-3 py-1 bg-gray-800 text-white text-xs rounded-full opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Next</span>
      </button>
    </div>

    <!-- Volume and Shuffle/Repeat -->
    <div class="flex justify-between items-center text-white relative z-10">
      <div class="flex items-center space-x-3 w-1/3">
        <i class="fas fa-volume-up text-xl opacity-80"></i>
        <div class="w-full h-1.5 bg-white bg-opacity-30 rounded-full">
          <div class="h-full bg-gradient-to-r from-fuchsia-500 to-purple-600 rounded-full w-3/4"></div>
        </div>
      </div>
      <div class="flex space-x-6 text-2xl">
        <button class="relative group opacity-80 hover:opacity-100 transition duration-300 transform hover:scale-110">
          <i class="fas fa-random"></i>
          <span class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-3 py-1 bg-gray-800 text-white text-xs rounded-full opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Shuffle</span>
        </button>
        <button class="relative group opacity-80 hover:opacity-100 transition duration-300 transform hover:scale-110">
          <i class="fas fa-redo-alt"></i>
          <span class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-3 py-1 bg-gray-800 text-white text-xs rounded-full opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Repeat</span>
        </button>
      </div>
    </div>

    <!-- Social Share/Engagement -->
    <div class="flex justify-around text-white relative z-10">
      <button class="flex flex-col items-center space-y-1 opacity-80 hover:opacity-100 transition duration-300 transform hover:scale-105">
        <i class="fas fa-share-alt text-2xl"></i>
        <span class="text-xs">Share</span>
      </button>
      <button class="flex flex-col items-center space-y-1 opacity-80 hover:opacity-100 transition duration-300 transform hover:scale-105">
        <i class="fas fa-comment-dots text-2xl"></i>
        <span class="text-xs">Comment</span>
      </button>
      <button class="flex flex-col items-center space-y-1 opacity-80 hover:opacity-100 transition duration-300 transform hover:scale-105">
        <i class="fas fa-heart text-2xl"></i>
        <span class="text-xs">Like</span>
      </button>
      <button class="flex flex-col items-center space-y-1 opacity-80 hover:opacity-100 transition duration-300 transform hover:scale-105">
        <i class="fas fa-plus text-2xl"></i>
        <span class="text-xs">Add to Playlist</span>
      </button>
    </div>
    
    <!-- Equalizer Visualizer (dummy) -->
    <div class="relative z-10 flex justify-center items-end h-16 space-x-1 mt-4">
      <div class="w-1.5 bg-gradient-to-b from-teal-400 to-cyan-600 rounded-full animate-pulse h-1/2"></div>
      <div class="w-1.5 bg-gradient-to-b from-fuchsia-500 to-purple-600 rounded-full animate-pulse animation-delay-300 h-3/4"></div>
      <div class="w-1.5 bg-gradient-to-b from-lime-400 to-green-500 rounded-full animate-pulse animation-delay-600 h-1/3"></div>
      <div class="w-1.5 bg-gradient-to-b from-teal-400 to-cyan-600 rounded-full animate-pulse animation-delay-900 h-2/3"></div>
      <div class="w-1.5 bg-gradient-to-b from-fuchsia-500 to-purple-600 rounded-full animate-pulse animation-delay-1200 h-1/2"></div>
      <div class="w-1.5 bg-gradient-to-b from-lime-400 to-green-500 rounded-full animate-pulse animation-delay-1500 h-full"></div>
      <div class="w-1.5 bg-gradient-to-b from-teal-400 to-cyan-600 rounded-full animate-pulse animation-delay-1800 h-1/4"></div>
      <div class="w-1.5 bg-gradient-to-b from-fuchsia-500 to-purple-600 rounded-full animate-pulse animation-delay-2100 h-2/3"></div>
    </div>


  </div>
</div>

<style>
  @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css");

  /* Custom animations for background blobs */
  @keyframes blob {
    0%, 100% {
      transform: translate(0, 0) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 40px) scale(0.9);
    }
  }

  .animate-blob {
    animation: blob 7s infinite cubic-bezier(0.6, 0.01, 0.4, 1);
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

  /* Custom animation for equalizer */
  @keyframes pulse {
    0%, 100% {
      transform: scaleY(0.5);
    }
    50% {
      transform: scaleY(1);
    }
  }

  .animate-pulse { 
    animation: pulse 1.5s infinite ease-in-out;
  }

  .animation-delay-300 { animation-delay: 0.3s; }
  .animation-delay-600 { animation-delay: 0.6s; }
  .animation-delay-900 { animation-delay: 0.9s; }
  .animation-delay-1200 { animation-delay: 1.2s; }
  .animation-delay-1500 { animation-delay: 1.5s; }
  .animation-delay-1800 { animation-delay: 1.8s; }
  .animation-delay-2100 { animation-delay: 2.1s; }

</style>

<script>
  // You can add JavaScript here for interactive elements if needed, but it's not required by the prompt.
  // For example, to toggle play/pause or change volume.
</script>

Composant de lecteur audio

Un composant de lecteur audio brutaliste avec une palette de couleurs pastel, une mise en page complexe et un design réactif avec prise en charge du thème sombre, adapté aux sites Web d’entreprise. Il utilise Tailwind CSS pour le style et comprend des commandes pour la lecture/pause, le volume et une barre de progression.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="bg-gradient-to-br from-purple-200 via-pink-200 to-red-200 dark:from-purple-900 dark:via-pink-900 dark:to-red-900 
              p-8 border-8 border-black dark:border-white shadow-brutalism 
              w-full max-w-2xl mx-auto 
              grid grid-cols-1 md:grid-cols-3 gap-6 transform -rotate-2 hover:rotate-0 transition-transform duration-300 relative"> 
       
    <div class="absolute top-4 right-4 text-black dark:text-white text-xs font-mono transform rotate-90">
        BRUTAL_AUDIO_PLAYER
    </div>

    <!-- Album Art / Info -->
    <div class="md:col-span-1 bg-black dark:bg-white p-4 border-4 border-black dark:border-white shadow-brutalism-sm">
      <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="w-full h-auto object-cover border-4 border-red-500 dark:border-blue-500 mb-4">
      <div class="text-white dark:text-black font-bold text-xl mb-1 font-mono">The Concrete Jungle</div>
      <div class="text-gray-300 dark:text-gray-700 text-sm font-mono">DJ Monolith</div>
      <div class="text-gray-500 dark:text-gray-500 text-xs font-mono mt-2">© 2023 Brutal Sounds Inc.</div>
    </div>

    <!-- Main Controls -->
    <div class="md:col-span-2 flex flex-col justify-between">

      <!-- Track Title & Progress Bar -->
      <div class="bg-white dark:bg-black p-4 border-4 border-black dark:border-white shadow-brutalism-sm mb-6">
        <div class="text-black dark:text-white font-mono text-lg mb-2">Track 01: Echoes in the Void</div>
        <div class="w-full bg-gray-300 dark:bg-gray-700 h-4 border-2 border-black dark:border-white relative">
          <div class="bg-red-500 dark:bg-blue-500 h-full w-3/5 border-r-2 border-black dark:border-white"></div>
          <div class="absolute top-0 left-3/5 -mt-1 -ml-1 h-6 w-6 bg-green-400 dark:bg-yellow-400 border-4 border-black dark:border-white transform rotate-45"></div>
        </div>
        <div class="flex justify-between text-xs font-mono text-black dark:text-white mt-1">
          <span>1:45</span>
          <span>4:23</span>
        </div>
      </div>

      <!-- Playback Controls -->
      <div class="grid grid-cols-3 gap-4 mb-6">
        <button class="bg-black dark:bg-white text-white dark:text-black p-4 border-4 border-black dark:border-white 
                       shadow-brutalism-sm hover:bg-red-500 dark:hover:bg-blue-500 transition-colors duration-200 
                       font-bold text-xl font-mono transform skew-x-6 hover:skew-x-0">RWD</button>
        <button class="bg-black dark:bg-white text-white dark:text-black p-4 border-4 border-black dark:border-white 
                       shadow-brutalism-sm hover:bg-green-500 dark:hover:bg-yellow-500 transition-colors duration-200 
                       font-bold text-xl font-mono transform -rotate-12 hover:rotate-0">PLAY</button>
        <button class="bg-black dark:bg-white text-white dark:text-black p-4 border-4 border-black dark:border-white 
                       shadow-brutalism-sm hover:bg-red-500 dark:hover:bg-blue-500 transition-colors duration-200 
                       font-bold text-xl font-mono transform skew-x-6 hover:skew-x-0">FFW</button>
      </div>

      <!-- Volume & Mute -->
      <div class="flex items-center space-x-4 bg-white dark:bg-black p-4 border-4 border-black dark:border-white shadow-brutalism-sm">
        <span class="text-black dark:text-white font-mono text-lg">VOL:</span>
        <div class="flex-grow bg-gray-300 dark:bg-gray-700 h-4 border-2 border-black dark:border-white relative">
          <div class="bg-green-500 dark:bg-yellow-500 h-full w-4/5 border-r-2 border-black dark:border-white"></div>
          <div class="absolute top-0 left-4/5 -mt-1 -ml-1 h-6 w-6 bg-red-400 dark:bg-cyan-400 border-4 border-black dark:border-white transform rotate-45"></div>
        </div>
        <button class="bg-black dark:bg-white text-white dark:text-black p-2 border-4 border-black dark:border-white 
                       shadow-brutalism-sm hover:bg-purple-500 dark:hover:bg-orange-500 transition-colors duration-200 
                       font-bold text-sm font-mono">MUTE</button>
      </div>

    </div>

    <!-- Footer / Additional Info -->
    <div class="md:col-span-3 bg-black dark:bg-white p-4 border-4 border-black dark:border-white shadow-brutalism-sm
                flex justify-around items-center flex-wrap mt-6">
        <div class="text-white dark:text-black font-mono text-sm mb-2 md:mb-0">"DISTORTION IS BEAUTY"</div>
        <div class="relative w-16 h-16 border-4 border-red-500 dark:border-blue-500 transform rotate-6 hover:rotate-0 transition-transform duration-300">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Artist Avatar" class="w-full h-full object-cover">
            <div class="absolute -bottom-2 -right-2 w-6 h-6 bg-green-500 dark:bg-yellow-500 border-4 border-black dark:border-white"></div>
        </div>
        <div class="text-white dark:text-black font-mono text-sm mt-2 md:mt-0">EST. MMXXIII</div>
    </div>

  </div>

  <!-- Brutalist Shadow Utility Class -->
  <style>
    .shadow-brutalism {
      box-shadow: 12px 12px 0px 0px #000, 14px 14px 0px 0px rgb(249 115 22);
    }
    .shadow-brutalism-sm {
      box-shadow: 6px 6px 0px 0px #000, 8px 8px 0px 0px rgb(239 68 68);
    }
    .dark .shadow-brutalism {
      box-shadow: 12px 12px 0px 0px #fff, 14px 14px 0px 0px rgb(59 130 246);
    }
    .dark .shadow-brutalism-sm {
      box-shadow: 6px 6px 0px 0px #fff, 8px 8px 0px 0px rgb(96 165 250);
    }
  </style>
</div>

Composant de lecteur audio

Un composant de lecteur audio brutaliste avec une palette de couleurs triadique et une complexité modérée, adapté à un tableau de bord. Il présente un design réactif avec la prise en charge du thème sombre, mis en œuvre avec Tailwind CSS.

Ouvrir Aperçu

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="bg-red-500 dark:bg-red-800 p-6 shadow-2xl border-4 border-black dark:border-white w-full max-w-md">
    <div class="flex justify-between items-center mb-4 border-b-4 border-black dark:border-white pb-2">
      <h2 class="text-2xl md:text-3xl font-extrabold text-black dark:text-white uppercase tracking-wider">Now Playing</h2>
      <div class="text-black dark:text-white text-lg font-bold">🔊</div>
    </div>
    
    <div class="flex items-center space-x-4 mb-6">
      <div class="w-20 h-20 bg-blue-500 dark:bg-blue-800 flex-shrink-0 border-2 border-black dark:border-white overflow-hidden">
        <img src="https://picsum.photos/80/80?random=1" alt="Album Art" class="w-full h-full object-cover grayscale">
      </div>
      <div class="flex-grow">
        <h3 class="text-xl md:text-2xl font-bold text-black dark:text-white uppercase leading-tight">Track Title Goes Here</h3>
        <p class="text-md md:text-lg text-black dark:text-white font-medium">Artist Name</p>
      </div>
    </div>
    
    <div class="mb-6">
      <div class="w-full bg-black dark:bg-white h-4 mb-2 relative border-2 border-black dark:border-white">
        <div class="bg-yellow-500 dark:bg-yellow-400 h-full" style="width: 60%;"></div>
        <div class="absolute -right-1 top-1/2 -translate-y-1/2 w-6 h-6 bg-black dark:bg-white border-2 border-black dark:border-white"></div>
      </div>
      <div class="flex justify-between text-black dark:text-white text-sm font-semibold">
        <span>2:30</span>
        <span>-1:45</span>
      </div>
    </div>
    
    <div class="grid grid-cols-3 gap-4 border-t-4 border-black dark:border-white pt-4">
      <button class="bg-black dark:bg-white text-yellow-500 dark:text-yellow-400 p-3 text-lg md:text-xl font-bold border-2 border-black dark:border-white flex items-center justify-center transform active:scale-95 transition-transform duration-100">
        ⏪
      </button>
      <button class="bg-yellow-500 dark:bg-yellow-400 text-black dark:text-white p-3 text-lg md:text-xl font-bold border-2 border-black dark:border-white flex items-center justify-center transform active:scale-95 transition-transform duration-100">
        ▶
      </button>
      <button class="bg-black dark:bg-white text-yellow-500 dark:text-yellow-400 p-3 text-lg md:text-xl font-bold border-2 border-black dark:border-white flex items-center justify-center transform active:scale-95 transition-transform duration-100">
        ⏩
      </button>
    </div>
    
    <div class="mt-6 pt-4 border-t-4 border-black dark:border-white">
      <div class="flex justify-between items-center mb-2">
        <span class="text-black dark:text-white font-bold text-sm">Volume</span>
        <span class="text-black dark:text-white text-sm">75%</span>
      </div>
      <div class="w-full bg-black dark:bg-white h-3 relative border-2 border-black dark:border-white">
        <div class="bg-blue-500 dark:bg-blue-800 h-full" style="width: 75%;"></div>
        <div class="absolute -right-1 top-1/2 -translate-y-1/2 w-5 h-5 bg-black dark:bg-white border-2 border-black dark:border-white"></div>
      </div>
    </div>
    
  </div>
</div>