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.
HTML Code
<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>Composants associés
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.
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.
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.