components/player.html

<div class="fixed bottom-0 left-64 right-0 bg-gray-900 border-t border-gray-800 h-20 flex items-center px-4">
    <div class="max-w-7xl mx-auto w-full flex items-center justify-between">
        <div class="flex items-center">
            <div class="relative w-12 h-12 mr-4">
                <img src="http://static.photos/music/80x80/42" alt="Now playing" class="rounded-md w-full h-full object-cover">
                <button class="play-button absolute inset-0 m-auto bg-green-500 bg-opacity-80 rounded-full w-8 h-8 flex items-center justify-center">
                    <i data-feather="play" class="h-4 w-4 text-white"></i>
                </button>
            </div>
            <div>
                <h4 class="font-medium">Current Track</h4>
                <p class="text-sm text-gray-400">Artist Name</p>
            </div>
        </div>
        <div class="flex flex-col items-center w-1/3">
            <div class="flex items-center space-x-4 mb-2">
                <button class="text-gray-300 hover:text-white">
                    <i data-feather="skip-back" class="h-5 w-5"></i>
                </button>
                <button class="bg-white text-black rounded-full p-2 hover:scale-105 transition">
                    <i data-feather="play" class="h-5 w-5"></i>
                </button>
                <button class="text-gray-300 hover:text-white">
                    <i data-feather="skip-forward" class="h-5 w-5"></i>
                </button>
            </div>
            <div class="w-full flex items-center">
                <span class="text-xs text-gray-400 mr-2">0:00</span>
                <div class="flex-1 h-1 bg-gray-700 rounded-full overflow-hidden">
                    <div class="bg-green-500 h-full w-1/3"></div>
                </div>
                <span class="text-xs text-gray-400 ml-2">3:42</span>
            </div>
        </div>
        <div class="flex items-center space-x-4">
            <button class="text-gray-300 hover:text-white">
                <i data-feather="volume-2" class="h-5 w-5"></i>
            </button>
            <div class="w-24 h-1 bg-gray-700 rounded-full overflow-hidden">
                <div class="bg-green-500 h-full w-2/3"></div>
            </div>
        </div>
    </div>
</div>