Компонент аудиоплеера
Простой компонент аудиоплеера, выполненный в скевоморфном стиле, с использованием цветовой схемы в оттенках серого и поддержкой темного режима.
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>Связанные компоненты
Компонент аудиоплеера
Бруталистский компонент аудиоплеера с триадической цветовой гаммой и умеренной сложностью, подходящий для приборной панели. Он отличается адаптивным дизайном с поддержкой темных тем, реализованных с помощью Tailwind CSS.
Компонент аудиоплеера
Отзывчивый компонент аудиоплеера с микровзаимодействиями, цветовой гаммой земляных тонов, умеренной сложностью и поддержкой темных тем, подходит для деловых/корпоративных сайтов.
Скевоморфный аудиоплеер
Компонент аудиоплеера, выполненный в скевоморфном стиле, пастельной цветовой гамме и сложном интерфейсе. Он поддерживает темный режим и является адаптивным, подходит для сайтов электронной коммерции.