Компонент аудиоплеера
Простой компонент аудиоплеера, выполненный в скевоморфном стиле, с использованием цветовой схемы в оттенках серого и поддержкой темного режима.
HTML-код
<div class="bg-gray-900 text-white p-4 rounded-lg shadow-lg max-w-xs mx-auto dark:bg-gray-800">
<div class="flex items-center justify-between mb-2">
<img src="https://picsum.photos/80/80" alt="Album Cover" class="rounded-lg shadow-md"/>
<div class="flex flex-col">
<h4 class="text-xl font-semibold">Track Title</h4>
<p class="text-gray-400">Artist Name</p>
</div>
</div>
<audio controls class="w-full">
<source src="audio-file.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<div class="flex justify-between mt-2">
<button class="bg-gray-700 hover:bg-gray-600 text-white rounded-full p-2">
⏮
</button>
<button class="bg-gray-700 hover:bg-gray-600 text-white rounded-full p-2">
Play
</button>
<button class="bg-gray-700 hover:bg-gray-600 text-white rounded-full p-2">
⏭
</button>
</div>
</div>Связанные компоненты
Неморфный аудиоплеер
Простой компонент Neumorphic Audio Player с цветовой схемой Earth tones для панели управления, созданный с помощью Tailwind CSS. Он поддерживает адаптивный дизайн и темную тему.
Компонент игривого аудиоплеера
Простой, игривый компонент аудиоплеера с теплыми оттенками сепии/коричневого, округлыми элементами и веселой эстетикой. Включает поддержку темного режима и полностью адаптивно подходит для развлекательных и медиаплатформ.
Компонент аудиоплеера
Сложный, минималистичный компонент аудиоплеера с ретро/винтажной цветовой гаммой, разработанный для платформ знакомств / социальных сетей. Функции включают элементы управления воспроизведением, индикатор выполнения, регулировку громкости, информацию о треке и поддержку темного режима.