Composant de lecteur audio
Un composant de lecteur audio simple et réactif avec un style de conception aquarelle/artistique, une palette de couleurs neutres chaudes et une prise en charge complète du mode sombre, adapté aux sites Web de conseil ou de service.
HTML Code
<div class="p-4 md:p-8 lg:p-12 bg-gradient-to-br from-amber-50 to-orange-100 dark:from-stone-800 dark:to-stone-900 font-sans antialiased min-h-screen flex items-center justify-center">
<div class="w-full max-w-sm mx-auto rounded-3xl shadow-xl overflow-hidden
bg-gradient-to-br from-white via-stone-50 to-stone-100
dark:from-stone-700 dark:via-stone-750 dark:to-stone-800
transform transition-all duration-300 hover:scale-[1.01]
border border-stone-200 dark:border-stone-600">
<div class="p-6 space-y-4 relative overflow-hidden">
<div class="absolute inset-0 bg-no-repeat bg-center opacity-30 dark:opacity-10"
style="background-image: url('https://picsum.photos/seed/watercolor/600/400?blur=5&grayscale'); background-size: cover; filter: saturate(0.5);">
</div>
<div class="relative z-10 flex flex-col items-center">
<div class="w-24 h-24 rounded-full overflow-hidden shadow-md border-4 border-stone-100 dark:border-stone-600">
<img src="https://picsum.photos/seed/consulting/150/150" alt="Podcast Thumbnail" class="w-full h-full object-cover grayscale opacity-90">
</div>
<h3 class="mt-4 text-xl font-semibold text-stone-800 dark:text-stone-100 text-center">
Understanding Client Needs
</h3>
<p class="text-sm text-stone-600 dark:text-stone-300 text-center">
Episode 01: The Consulting Journey
</p>
</div>
<div class="relative z-10 space-y-4">
<div class="w-full h-2 bg-stone-200 dark:bg-stone-600 rounded-full overflow-hidden relative">
<div class="absolute top-0 left-0 h-full bg-orange-300 dark:bg-orange-500 rounded-full" style="width: 40%;"></div>
<div class="absolute top-1/2 left-[40%] -translate-x-1/2 -translate-y-1/2 w-4 h-4 bg-orange-500 dark:bg-orange-400 rounded-full shadow-lg"></div>
</div>
<div class="flex justify-between text-xs text-stone-500 dark:text-stone-400">
<span>0:45</span>
<span>2:30</span>
</div>
</div>
<div class="relative z-10 flex justify-center items-center gap-6">
<button class="p-2 text-stone-600 dark:text-stone-300 rounded-full hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12v1a8 8 0 0015.356 2m-.001-2H12m13 0l-5 5-5-5" />
</svg>
</button>
<button class="p-3 bg-orange-400 dark:bg-orange-600 text-white rounded-full shadow-lg
hover:bg-orange-500 dark:hover:bg-orange-500 transition-colors
focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-700">
<svg xmlns="http://www.w3.org/2000/svg" class="h-7 w-7" viewBox="0 0 20 20" fill="currentColor">
<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" />
</svg>
</button>
<button class="p-2 text-stone-600 dark:text-stone-300 rounded-full hover:bg-stone-200 dark:hover:bg-stone-600 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-orange-500">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12v1a8 8 0 0015.356 2m-.001-2H12m13 0l-5 5-5-5" />
</svg>
</button>
</div>
</div>
</div>
</div>Composants associés
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.
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.
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.