ОрганическийВкладкиКомпонент

<div class="p-4 md:p-8 dark:bg-gray-900 bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-800 dark:to-gray-950 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">
  <!-- Tabs Container -->
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-850 rounded-3xl shadow-xl overflow-hidden">
    <!-- Tabs Navigation -->
    <div class="flex border-b border-blue-200 dark:border-gray-700 bg-gradient-to-r from-blue-500 to-blue-600 dark:from-gray-700 dark:to-gray-800 p-1 md:p-2 rounded-t-3xl">
      <button class="flex-1 py-3 px-2 md:px-4 text-sm md:text-base font-semibold text-white focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-gray-600 rounded-2xl transition-all duration-300 mr-1 md:mr-2 shadow-inner hover:bg-blue-700 dark:hover:bg-gray-900 bg-blue-600 dark:bg-gray-800 dark:text-white transform scale-105">
        Now Playing
      </button>
      <button class="flex-1 py-3 px-2 md:px-4 text-sm md:text-base font-medium text-blue-100 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-gray-600 rounded-2xl transition-all duration-300 hover:bg-blue-500 dark:hover:bg-gray-750 hover:text-white">
        Queue
      </button>
      <button class="flex-1 py-3 px-2 md:px-4 text-sm md:text-base font-medium text-blue-100 dark:text-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-gray-600 rounded-2xl transition-all duration-300 ml-1 md:ml-2 hover:bg-blue-500 dark:hover:bg-gray-750 hover:text-white">
        More Tracks
      </button>
    </div>

    <!-- Tabs Content -->
    <div class="p-4 md:p-8 bg-white dark:bg-gray-850">
      <!-- Content for 'Now Playing' Tab -->
      <div>
        <h2 class="text-2xl md:text-3xl font-bold mb-4 dark:text-blue-300 text-blue-700">Currently Listening</h2>
        <div class="flex flex-col md:flex-row items-center space-y-4 md:space-y-0 md:space-x-6">
          <div class="relative w-48 h-48 md:w-56 md:h-56 rounded-full overflow-hidden shadow-lg border-4 border-blue-300 dark:border-gray-700 flex-shrink-0">
            <img src="https://picsum.photos/id/1040/400/400" alt="Album Art" class="w-full h-full object-cover transform transition-transform duration-300 hover:scale-105 filter saturate-125 dark:saturate-100">
            <div class="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent rounded-full flex items-end justify-center p-4">
              <button class="text-white bg-blue-600 dark:bg-gray-700 rounded-full p-3 shadow-lg hover:bg-blue-700 dark:hover:bg-gray-900 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-gray-600">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"></path></svg>
              </button>
            </div>
          </div>
          <div class="text-center md:text-left">
            <p class="text-blue-500 dark:text-blue-400 text-lg font-semibold mb-1">Artist Name</p>
            <h3 class="text-3xl md:text-4xl font-extrabold leading-tight mb-2 dark:text-white text-gray-900">Song Title Goes Here</h3>
            <p class="text-gray-600 dark:text-gray-400 text-md md:text-lg">Album Name - Year</p>
            <div class="mt-4 flex items-center justify-center md:justify-start space-x-4">
              <button class="text-gray-500 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-gray-600 rounded-full p-2">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M.707 10.293a1 1 0 010-1.414L3.586 5.5a1 1 0 011.414 0l.707.707a1 1 0 010 1.414L3.414 9H15a1 1 0 010 2H3.414l2.293 2.293a1 1 0 010 1.414l-.707.707a1 1 0 01-1.414 0L.707 10.293z" clip-rule="evenodd"></path></svg>
              </button>
              <button class="text-gray-500 hover:text-blue-600 dark:hover:text-blue-300 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:focus:ring-gray-600 rounded-full p-2">
                <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.293 9.707a1 1 0 010 1.414L13.414 14.5a1 1 0 01-1.414 0l-.707-.707a1 1 0 010-1.414L16.586 11H5a1 1 0 010-2h11.586l-2.293-2.293a1 1 0 010-1.414l.707-.707a1 1 0 011.414 0l2.828 2.828z" clip-rule="evenodd"></path></svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>