Компонент аудиоплеера
Отзывчивый аудиоплеер, выполненный в стиле Glassmorphism, имеет вид матового стекла и поддержку темного режима.
HTML-код
<div class="flex justify-center items-center min-h-screen bg-gray-200 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 backdrop-blur-lg bg-opacity-30 border border-gray-300 dark:border-gray-600">
<img src="https://picsum.photos/200/100" alt="Album Art" class="rounded-lg mb-4">
<div class="flex flex-col items-center">
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">Song Title</h2>
<p class="text-sm text-gray-600 dark:text-gray-400">Artist Name</p>
</div>
<div class="w-full my-4">
<input type="range" class="w-full h-1 bg-gray-300 rounded-lg appearance-none cursor-pointer dark:bg-gray-600" min="0" max="100" value="50">
</div>
<div class="flex justify-between">
<button class="bg-blue-500 text-white font-semibold py-2 px-4 rounded-lg focus:outline-none">Play</button>
<button class="bg-red-500 text-white font-semibold py-2 px-4 rounded-lg focus:outline-none">Stop</button>
</div>
</div>
</div>Связанные компоненты
Компонент аудиоплеера
Бруталистский компонент аудиоплеера с пастельной цветовой гаммой, сложной версткой и адаптивным дизайном с поддержкой темных тем, подходит для бизнес-сайтов. Он использует Tailwind CSS для стилизации и включает в себя элементы управления воспроизведением/паузой, громкостью и индикатором выполнения.
Компонент аудиоплеера Glassmorphism
Сложный компонент аудиоплеера в стиле glassmorphism, разработанный для производственных и промышленных интерфейсов, отличающийся высокой контрастностью цветов, полной отзывчивостью и поддержкой темных режимов.
Компонент аудиоплеера Cyberpunk
Простой, отзывчивый компонент аудиоплеера с футуристической эстетикой киберпанка с использованием фиолетово-фиолетовой цветовой гаммы, подходящий для демонстрации портфолио. Включает поддержку темного режима.