Бруталистский аудиоплеер
Бруталистский компонент аудиоплеера с адаптивным дизайном, поддержкой темного режима и отсутствием JavaScript.
HTML-код
<div class="min-h-screen bg-stone-100 dark:bg-black p-8 flex items-center justify-center">
<div class="w-full max-w-md bg-white dark:bg-stone-900 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] border-[4px] border-black dark:border-white overflow-hidden">
<div class="p-6">
<h3 class="text-2xl font-bold text-black dark:text-white mb-4 border-b-4 border-black dark:border-white pb-2">Now Playing</h3>
<div class="flex items-center mb-6">
<img class="w-16 h-16 object-cover border-4 border-black dark:border-white mr-4" src="https://picsum.photos/100/100" alt="Album Art">
<div>
<p class="text-xl font-semibold text-black dark:text-white">Track Title</p>
<p class="text-black dark:text-white">Artist Name</p>
</div>
</div>
<div class="mb-6">
<div class="h-4 bg-gray-300 dark:bg-stone-700 border-2 border-black dark:border-white"></div>
</div>
<div class="flex justify-between text-black dark:text-white mb-6">
<span>0:00</span>
<span>3:45</span>
</div>
<div class="flex justify-center space-x-6">
<button class="p-3 border-4 border-black dark:border-white text-black dark:text-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] font-bold">Prev</button>
<button class="p-3 border-4 border-black dark:border-white text-black dark:text-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] font-bold">Play</button>
<button class="p-3 border-4 border-black dark:border-white text-black dark:text-white shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] font-bold">Next</button>
</div>
</div>
</div>
</div>
Связанные компоненты
Ретро Аудио Плеер
Компонент аудиоплеера с ретро/винтажным дизайном, пастельная цветовая гамма, сложная сложность, назначение для социальных сетей, адаптивность, поддержка темных тем, только HTML с Tailwind CSS
Retro_Gaming_Audio_Player
Аудиоплеер в стиле ретро/винтаж, разработанный для игровых веб-сайтов, отличается дополнительной цветовой схемой, адаптивным макетом и поддержкой темного режима. Он имитирует эстетику 80-х/90-х годов с помощью кассетного визуального ряда.
Аудиоплеер класса люкс/премиум класса
Простой, элегантный компонент аудиоплеера, разработанный для форумов или сообществ, отличается роскошным/премиальным стилем с осенней цветовой гаммой и полной отзывчивостью с поддержкой темного режима.