音频播放器

Audio Player 组件

具有三色配色方案和中等复杂性的粗野派音频播放器组件，适用于仪表板。它具有响应式设计，支持深色主题，并通过 Tailwind CSS 实现。

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="bg-red-500 dark:bg-red-800 p-6 shadow-2xl border-4 border-black dark:border-white w-full max-w-md">
    <div class="flex justify-between items-center mb-4 border-b-4 border-black dark:border-white pb-2">
      <h2 class="text-2xl md:text-3xl font-extrabold text-black dark:text-white uppercase tracking-wider">Now Playing</h2>
      <div class="text-black dark:text-white text-lg font-bold">🔊</div>
    </div>
    
    <div class="flex items-center space-x-4 mb-6">
      <div class="w-20 h-20 bg-blue-500 dark:bg-blue-800 flex-shrink-0 border-2 border-black dark:border-white overflow-hidden">
        <img src="https://picsum.photos/80/80?random=1" alt="Album Art" class="w-full h-full object-cover grayscale">
      </div>
      <div class="flex-grow">
        <h3 class="text-xl md:text-2xl font-bold text-black dark:text-white uppercase leading-tight">Track Title Goes Here</h3>
        <p class="text-md md:text-lg text-black dark:text-white font-medium">Artist Name</p>
      </div>
    </div>
    
    <div class="mb-6">
      <div class="w-full bg-black dark:bg-white h-4 mb-2 relative border-2 border-black dark:border-white">
        <div class="bg-yellow-500 dark:bg-yellow-400 h-full" style="width: 60%;"></div>
        <div class="absolute -right-1 top-1/2 -translate-y-1/2 w-6 h-6 bg-black dark:bg-white border-2 border-black dark:border-white"></div>
      </div>
      <div class="flex justify-between text-black dark:text-white text-sm font-semibold">
        <span>2:30</span>
        <span>-1:45</span>
      </div>
    </div>
    
    <div class="grid grid-cols-3 gap-4 border-t-4 border-black dark:border-white pt-4">
      <button class="bg-black dark:bg-white text-yellow-500 dark:text-yellow-400 p-3 text-lg md:text-xl font-bold border-2 border-black dark:border-white flex items-center justify-center transform active:scale-95 transition-transform duration-100">
        ⏪
      </button>
      <button class="bg-yellow-500 dark:bg-yellow-400 text-black dark:text-white p-3 text-lg md:text-xl font-bold border-2 border-black dark:border-white flex items-center justify-center transform active:scale-95 transition-transform duration-100">
        ▶
      </button>
      <button class="bg-black dark:bg-white text-yellow-500 dark:text-yellow-400 p-3 text-lg md:text-xl font-bold border-2 border-black dark:border-white flex items-center justify-center transform active:scale-95 transition-transform duration-100">
        ⏩
      </button>
    </div>
    
    <div class="mt-6 pt-4 border-t-4 border-black dark:border-white">
      <div class="flex justify-between items-center mb-2">
        <span class="text-black dark:text-white font-bold text-sm">Volume</span>
        <span class="text-black dark:text-white text-sm">75%</span>
      </div>
      <div class="w-full bg-black dark:bg-white h-3 relative border-2 border-black dark:border-white">
        <div class="bg-blue-500 dark:bg-blue-800 h-full" style="width: 75%;"></div>
        <div class="absolute -right-1 top-1/2 -translate-y-1/2 w-5 h-5 bg-black dark:bg-white border-2 border-black dark:border-white"></div>
      </div>
    </div>
    
  </div>
</div>

Audio Player 组件

一个响应式音频播放器组件，具有微交互、大地色调配色方案、中等复杂性和深色主题支持，适用于商业/公司网站。

打开预览

                <div class="p-4 bg-stone-100 dark:bg-stone-900 rounded-lg shadow-xl max-w-md mx-auto my-10 transform transition duration-500 hover:scale-105">
  <div class="flex items-center space-x-4">
    <div class="flex-shrink-0">
      <img class="h-16 w-16 rounded-lg object-cover shadow-lg" src="https://picsum.photos/seed/audio-art/100/100" alt="Album Art">
    </div>
    <div class="flex-grow">
      <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-200">Whispering Pines</h3>
      <p class="text-sm text-stone-600 dark:text-stone-400">Nature Sounds Co.</p>
    </div>
    <button class="p-3 rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 transform transition duration-300 hover:scale-110 hover:bg-stone-400 dark:hover:bg-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
      <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
        <path d="M8 5v14l11-7z"/>
      </svg>
    </button>
  </div>

  <div class="mt-5">
    <div class="flex items-center space-x-3">
      <span class="text-xs text-stone-600 dark:text-stone-400">0:45</span>
      <div class="flex-grow bg-stone-300 dark:bg-stone-700 rounded-full h-2">
        <div class="bg-amber-700 dark:bg-amber-500 h-2 rounded-full" style="width: 45%;"></div>
      </div>
      <span class="text-xs text-stone-600 dark:text-stone-400">3:20</span>
    </div>

    <div class="flex justify-between items-center mt-4">
      <button class="p-2 rounded-full text-stone-600 dark:text-stone-400 transform transition duration-300 hover:scale-110 hover:text-stone-800 dark:hover:text-stone-200 focus:outline-none">
        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
      </button>
      <button class="p-2 rounded-full text-stone-600 dark:text-stone-400 transform transition duration-300 hover:scale-110 hover:text-stone-800 dark:hover:text-stone-200 focus:outline-none">
        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18 18l-8.5-6L18 6v12zM6 6v12h2V6H6z"/></svg>
      </button>
      <button class="p-2 rounded-full text-stone-600 dark:text-stone-400 transform transition duration-300 hover:scale-110 hover:text-stone-800 dark:hover:text-stone-200 focus:outline-none">
        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 4.5V19.5M19.5 12H4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </button>
      
      <div class="relative group">
        <button class="p-2 rounded-full text-stone-600 dark:text-stone-400 transform transition duration-300 hover:scale-110 hover:text-stone-800 dark:hover:text-stone-200 focus:outline-none">
          <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15v-7h2v7h-2zm0-9V7h2v1h-2z"/></svg>
        </button>
        <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-stone-700 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap">Volume Control</span>
      </div>
    </div>
  </div>
</div>

拟物化音频播放器

一个音频播放器组件，设计有 Skeuomorphic 样式、柔和的配色方案和复杂的界面。它支持暗模式并且响应迅速，适用于电子商务网站。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900 p-4">
  <div class="w-full max-w-md bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl p-6 relative overflow-hidden transform transition-all duration-300 hover:scale-[1.02] active:scale-[0.98] focus:scale-[1.01] outline-none"
    tabindex="0" aria-label="Audio Player with complex controls">

    <!-- Top Controls and Display -->
    <div class="flex items-center justify-between mb-6">

      <div class="text-gray-600 dark:text-gray-300">
        <i class="fas fa-bars text-xl"></i>
      </div>

      <div class="text-center flex-grow">
        <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200 uppercase tracking-wide">Now Playing</h3>
        <p class="text-xs text-gray-500 dark:text-gray-400">Pastel Vibes</p>
      </div>

      <div class="text-gray-600 dark:text-gray-300">
        <i class="fas fa-heart text-xl"></i>
      </div>
    </div>

    <!-- Album Art / Display Area -->
    <div class="relative w-48 h-48 mx-auto mb-8 rounded-full shadow-inner-lg transform transition-transform duration-300 group hover:rotate-3 active:rotate-[-3deg] focus:rotate-2">
      <img src="https://picsum.photos/300/300?random=1" alt="Album Art" class="w-full h-full rounded-full object-cover shadow-md border-4 border-gray-400 dark:border-gray-600 transform transition-transform duration-300 group-hover:scale-105" />
      <div class="absolute inset-0 rounded-full border-2 border-dashed border-gray-400 dark:border-gray-500 animate-spin-slow"></div>
    </div>

    <!-- Song Info -->
    <div class="text-center mb-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-1">Dreamy Horizon</h2>
      <p class="text-md text-gray-600 dark:text-gray-300">Acoustic Serenity</p>
    </div>

    <!-- Progress Bar (Skeuomorphic) -->
    <div class="mb-8">
      <div class="h-3 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner-sm relative">
        <div class="absolute inset-y-0 left-0 bg-gradient-to-r from-pink-300 to-purple-400 dark:from-pink-500 dark:to-purple-600 rounded-full w-2/3 shadow-md"></div>
        <div class="absolute -right-2 top-1/2 -translate-y-1/2 w-5 h-5 bg-white border-2 border-gray-400 dark:border-gray-600 rounded-full shadow-lg cursor-pointer transform hover:scale-110 transition-transform duration-200" role="slider" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100" aria-label="Playback progress"></div>
      </div>
      <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-2">
        <span>2:30</span>
        <span>4:15</span>
      </div>
    </div>

    <!-- Main Controls -->
    <div class="flex items-center justify-around mb-8">

      <button class="w-12 h-12 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75" aria-label="Previous track">
        <i class="fas fa-backward text-xl text-gray-600 dark:text-gray-300"></i>
      </button>

      <button class="w-16 h-16 flex items-center justify-center rounded-full bg-gradient-to-br from-pink-300 to-purple-400 dark:from-pink-500 dark:to-purple-600 shadow-xl hover:shadow-2xl transition-all duration-200 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75" aria-label="Play/Pause">
        <i class="fas fa-play text-2xl text-white"></i>
      </button>

      <button class="w-12 h-12 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75" aria-label="Next track">
        <i class="fas fa-forward text-xl text-gray-600 dark:text-gray-300"></i>
      </button>
    </div>

    <!-- Additional Controls -->
    <div class="flex items-center justify-around text-gray-500 dark:text-gray-400 text-lg">
      <button class="hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75" aria-label="Repeat">
        <i class="fas fa-redo-alt"></i>
      </button>
      <button class="hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75" aria-label="Shuffle">
        <i class="fas fa-random"></i>
      </button>
      <button class="hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75" aria-label="Volume">
        <i class="fas fa-volume-up"></i>
      </button>
      <button class="hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75" aria-label="Playlist">
        <i class="fas fa-list"></i>
      </button>
    </div>

  </div>
</div>

<!-- To ensure icons are displayed, include Font Awesome via CDN in your project's HTML head -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" /> -->

3D 单色音频播放器

用于 Portfolio 的响应式 3D 单色音频播放器组件，支持深色模式

打开预览

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-sm p-6 transform transition-all duration-300 hover:scale-105">
    <!-- 3D Effect Base -->
    <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 rounded-lg opacity-50 transform translate-x-2 translate-y-2"></div>

    <div class="relative z-10">
      <!-- Album Art (Placeholder with 3D depth) -->
      <div class="w-full h-48 bg-gray-300 dark:bg-gray-700 rounded-md mb-4 overflow-hidden relative">
        <img src="https://picsum.photos/400/300" alt="Album Art" class="w-full h-full object-cover transform transition-transform duration-300 hover:scale-110">
        <!-- Simple Overlay for Depth -->
        <div class="absolute inset-0 bg-black opacity-10"></div>
      </div>

      <!-- Song Title and Artist -->
      <div class="text-center mb-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Song Title Goes Here</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400">Artist Name</p>
      </div>

      <!-- Progress Bar (Simple 3D look) -->
      <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5 mb-4 relative">
        <div class="bg-blue-500 dark:bg-blue-400 h-2.5 rounded-full" style="width: 50%;"></div>
        <!-- Simple highlight for 3D effect -->
        <div class="absolute top-0 left-0 h-full bg-white opacity-20 rounded-full" style="width: 50%;"></div>
      </div>

      <!-- Controls (Simple, with potential for interactive 3D effect on hover) -->
      <div class="flex justify-center space-x-6">
        <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none transform transition-transform duration-150 hover:scale-110">
          <!-- Simple SVG Placeholder for Previous Button -->
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
          </svg>
        </button>
        <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none transform transition-transform duration-150 hover:scale-125">
          <!-- Simple SVG Placeholder for Play Button -->
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197 2.132A1 1 0 0010 14.17V9.83a1 1 0 001.555-.832l3.197 2.132a1 1 0 010 1.664z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </button>
        <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none transform transition-transform duration-150 hover:scale-110">
          <!-- Simple SVG Placeholder for Next Button -->
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

拟物音频播放器

一个简单的 Neumorphic Audio Player Component，具有 Dashboard 的 Earth Tones 配色方案，使用 Tailwind CSS 构建。它支持响应式设计和深色主题。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
  <div class="w-full max-w-sm bg-gray-300 dark:bg-gray-700 rounded-xl p-6 shadow-neumorphic-light dark:shadow-neumorphic-dark">
    <div class="flex items-center mb-4">
      <img class="w-16 h-16 rounded-full mr-4 shadow-neumorphic-light dark:shadow-neumorphic-dark" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Album Art">
      <div>
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Song Title</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400">Artist Name</p>
      </div>
    </div>
    <div class="w-full h-2 bg-gray-400 dark:bg-gray-600 rounded-full mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <div class="w-1/2 h-full bg-green-600 dark:bg-green-500 rounded-full"></div>
    </div>
    <div class="flex items-center justify-around">
      <button class="p-3 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-700 dark:text-gray-300 hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
      </button>
      <button class="p-4 rounded-full bg-green-500 dark:bg-green-600 shadow-neumorphic-light dark:shadow-neumorphic-dark text-white hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed transform scale-110">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20"><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>
      <button class="p-3 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-700 dark:text-gray-300 hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
      </button>
    </div>
  </div>
</div>

<style>.shadow-neumorphic-light { box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff; } .dark .shadow-neumorphic-dark { box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #969696; } .shadow-inner-neumorphic-light { box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff; } .dark .shadow-inner-neumorphic-dark { box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #969696; } .hover\:shadow-neumorphic-light-pressed:hover { box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff; } .dark .hover\:shadow-neumorphic-dark-pressed:hover { box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #969696; }</style>

新拟态音频播放器

一个 Neumorphism 风格的音频播放器组件，具有播放、暂停、跳过和音量控制，专为商业网站设计。包含进度条、歌曲标题、艺术家和专辑封面。包括使用 Tailwind CSS 的响应式设计和深色模式支持。

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-900 p-4">
  <div class="w-full max-w-md bg-gray-200 dark:bg-gray-800 rounded-xl p-6 shadow-xl dark:shadow-xl-dark">
    <div class="flex flex-col items-center">
      <div class="w-32 h-32 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner dark:shadow-inner-dark flex items-center justify-center">
        <img src="https://picsum.photos/128" alt="Album Artwork" class="rounded-full w-full h-full object-cover">
      </div>
      <h3 class="mt-4 text-lg font-semibold text-gray-800 dark:text-gray-200">Song Title</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400">Artist Name - Album Name</p>
    </div>

    <div class="w-full mt-6">
      <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-xs">
        <span>0:00</span>
        <span>3:45</span>
      </div>
      <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2 mt-1 shadow-inner dark:shadow-inner-dark">
        <div class="bg-blue-500 h-2 rounded-full" style="width: 30%;"></div>
      </div>
    </div>

    <div class="flex items-center justify-around mt-8">
      <button class="w-12 h-12 bg-gray-200 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-neumorphic dark:shadow-neumorphic-dark">
        <svg class="w-6 h-6 text-gray-700 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
      <button class="w-16 h-16 bg-gray-200 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-neumorphic-lg dark:shadow-neumorphic-lg-dark">
        <svg class="w-8 h-8 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
          <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>
      <button class="w-12 h-12 bg-gray-200 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-neumorphic dark:shadow-neumorphic-dark">
        <svg class="w-6 h-6 text-gray-700 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>

    <div class="flex items-center mt-6">
      <svg class="w-5 h-5 text-gray-600 dark:text-gray-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M9.384 4.464A1 1 0 0110 4v12a1 1 0 01-1.707.707L6 14H3a1 1 0 01-1-1V7a1 1 0 011-1h3l2.293-2.293a1 1 0 011.091-.243zM14.003 7.77a.75.75 0 01.412 1.367l-3.495 1.896-.943-.943 3.496-1.897z" clip-rule="evenodd"></path>
      </svg>
      <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2 shadow-inner dark:shadow-inner-dark">
        <div class="bg-blue-500 h-2 rounded-full" style="width: 60%;"></div>
      </div>
      <svg class="w-5 h-5 text-gray-600 dark:text-gray-400 ml-2" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-b b a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414zm-1.414 4.242a1 1 0 10-1.414 1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        <path d="M1.723 13.863a1 1 0 00-.723.451l-1 1.5A1 1 0 001 18.122V19a1 1 0 001 1h1a1 1 0 001-1v-.878A1 1 0 003.723 18L3 16.863a1 1 0 00-.723-.451zM4 5a1 1 0 00-1 1v8a1 1 0 001 1h2a1 1 0 001-1V6a1 1 0 00-1-1H4z" clip-rule="evenodd"></path>
      </svg>
    </div>
  </div>
</div>

<style>
  .shadow-xl-dark {
    box-shadow: 7px 7px 15px #1f1f1f, -7px -7px 15px #2d2d2d;
  }
  .shadow-inner-dark {
    box-shadow: inset 5px 5px 10px #1f1f1f, inset -5px -5px 10px #2d2d2d;
  }
  .shadow-neumorphic {
    box-shadow: 5px 5px 10px #b0b0b0, -5px -5px 10px #ffffff;
  }
  .shadow-neumorphic-dark {
    box-shadow: 5px 5px 10px #1f1f1f, -5px -5px 10px #2d2d2d;
  }
  .shadow-neumorphic-lg {
     box-shadow: 8px 8px 15px #b0b0b0, -8px -8px 15px #ffffff;
  }
  .shadow-neumorphic-lg-dark {
     box-shadow: 8px 8px 15px #1f1f1f, -8px -8px 15px #2d2d2d;
  }
</style>

音频播放器组件

一个简单的音频播放器组件，采用拟物化风格，使用灰度色调并支持暗黑模式。

打开预览

                <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>

音频播放器组件

一个为仪表板设计的复杂音频播放器组件，具有响应式设计、深色主题支持和吸引人的微交互。

打开预览

                <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>

复古音频播放器

具有 Retro/Vintage 设计的音频播放器组件、柔和的配色方案、复杂的复杂性、社交媒体用途、响应式、深色主题支持、仅 HTML 和 Tailwind CSS

打开预览

                <div class="bg-gradient-to-br from-purple-200 via-pink-200 to-yellow-100 dark:from-purple-800 dark:via-pink-800 dark:to-yellow-700 p-6 rounded-lg shadow-xl max-w-sm mx-auto font-mono">
  <div class="flex justify-between items-center mb-4">
    <div class="text-gray-700 dark:text-gray-300 text-sm">NOW PLAYING</div>
    <div class="text-gray-700 dark:text-gray-300 text-sm">03:45</div>
  </div>
  <div class="flex items-center mb-6">
    <img class="w-16 h-16 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Album Art">
    <div>
      <h3 class="text-lg font-bold text-gray-800 dark:text-white">Synthwave Nights</h3>
      <p class="text-gray-600 dark:text-gray-400">Neon Rider</p>
    </div>
  </div>
  <div class="relative mb-4">
    <div class="h-2 bg-purple-300 dark:bg-purple-600 rounded-full"></div>
    <div class="absolute top-0 left-0 h-2 bg-purple-600 dark:bg-purple-300 rounded-full w-3/4"></div>
    <div class="absolute -top-1 left-3/4 w-4 h-4 bg-purple-800 dark:bg-purple-100 rounded-full shadow"></div>
  </div>
  <div class="flex justify-center items-center space-x-6">
    <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none">
      <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path></svg>
    </button>
    <button class="bg-purple-500 dark:bg-purple-400 text-white dark:text-gray-800 rounded-full p-3 shadow-lg hover:bg-purple-600 dark:hover:bg-purple-300 focus:outline-none">
      <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197 2.132A1 1 0 0010 13.803V9.197a1 1 0 001.555-.832l3.197 2.132a1 1 0 010 1.664z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    </button>
    <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none">
      <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
    </button>
  </div>
  <div class="flex justify-center items-center mt-4 space-x-4 text-gray-700 dark:text-gray-300 text-sm">
    <div><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg></div>
    <div><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.295 10C9.501 6.619 13.305 4 18 4s8.499 2.619 9.705 6M16 18V9m-5 5v4m9-4v4"></path></svg></div>
    <div><svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19V6a2 2 0 00-2-2H5a2 2 0 00-2 2v13a2 2 0 002 2h2a2 2 0 002-2zm7 0V6a2 2 0 00-2-2h-2a2 2 0 00-2 2v13a2 2 0 002 2h2a2 2 0 002-2z"></path></svg></div>
  </div>
</div>

音频播放器组件

暗模式音频播放器组件

打开预览

                <div class="flex items-center justify-center min-h-screen bg-gray-900">
  <div class="container p-6 bg-gray-800 rounded-lg shadow-xl">
    <div class="flex items-center justify-between mb-6">
      <div class="flex items-center">
        <img class="w-12 h-12 mr-4 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Album Art">
        <div>
          <h3 class="text-lg font-semibold text-white">Song Title</h3>
          <p class="text-sm text-gray-400">Artist Name</p>
        </div>
      </div>
      <button class="text-gray-400 hover:text-white focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
      </button>
    </div>
    <div class="mb-4">
      <div class="flex items-center justify-between text-gray-400">
        <span class="text-xs">0:00</span>
        <span class="text-xs">3:45</span>
      </div>
      <div class="w-full h-2 bg-gray-700 rounded-full">
        <div class="h-2 bg-red-500 rounded-full" style="width: 25%;"></div>
      </div>
    </div>
    <div class="flex items-center justify-center space-x-6">
      <button class="text-gray-400 hover:text-white focus:outline-none">
        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.75 17.25L10.5 12l5.25-5.25"></path></svg>
      </button>
      <button class="flex items-center justify-center w-12 h-12 text-gray-900 bg-white rounded-full hover:bg-gray-200 focus:outline-none">
        <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.832L12.364 10 9.555 7.168z" clip-rule="evenodd"></path></svg>
      </button>
      <button class="text-gray-400 hover:text-white focus:outline-none">
        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17.25L14.25 12 9 6.75"></path></svg>
      </button>
    </div>
  </div>
</div>

类别