Компоненты Аудиоплеер Бруталистский аудиоплеер

Бруталистский аудиоплеер

Бруталистский компонент аудиоплеера с адаптивным дизайном, поддержкой темного режима и отсутствием 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-х годов с помощью кассетного визуального ряда.

Открытый

Аудиоплеер класса люкс/премиум класса

Простой, элегантный компонент аудиоплеера, разработанный для форумов или сообществ, отличается роскошным/премиальным стилем с осенней цветовой гаммой и полной отзывчивостью с поддержкой темного режима.

Открытый