Componente del reproductor de audio

<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md mx-auto">
    <div class="flex items-center justify-between mb-4">
        <img src="https://picsum.photos/100/100" alt="Album Art" class="rounded-lg w-16 h-16">
        <div class="flex flex-col ml-4">
            <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Song Title</h2>
            <p class="text-gray-600 dark:text-gray-400">Artist Name</p>
        </div>
    </div>
    <div class="flex flex-col items-center mb-4">
        <div class="mb-2">
            <input type="range" min="0" max="100" value="50" class="appearance-none w-full h-2 bg-gray-300 dark:bg-gray-700 rounded-lg cursor-pointer">
        </div>
        <div class="flex justify-center items-center space-x-4">
            <button class="bg-pink-500 hover:bg-pink-400 dark:bg-pink-700 dark:hover:bg-pink-600 text-white font-bold py-2 px-4 rounded-full transition ease-in-out duration-150">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                </svg>
            </button>
            <button class="bg-indigo-500 hover:bg-indigo-400 dark:bg-indigo-700 dark:hover:bg-indigo-600 text-white font-bold py-2 px-4 rounded-full transition ease-in-out duration-150">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.364 6.364a3 3 0 003.364 4.636l6.364-6.364a3 3 0 00-4.636-4.636z" />
                </svg>
            </button>
            <button class="bg-yellow-500 hover:bg-yellow-400 dark:bg-yellow-700 dark:hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded-full transition ease-in-out duration-150">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5h6m-1 14h-4m2-6h4m-5 0H8m1-6h2m8-2v12a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h12a2 2 0 012 2z" />
                </svg>
            </button>
        </div>
    </div>
    <div class="flex items-center justify-between">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-2">
        <div class="text-gray-800 dark:text-gray-200">User Name</div>
        <div class="text-gray-600 dark:text-gray-400">00:00</div>
    </div>
</div>