CCHub Logo CCHub Tailwind Collection
コンポーネント オーディオプレーヤー Glassmorphismオーディオプレーヤー

Glassmorphismオーディオプレーヤー

ダッシュボード用の鮮やかな色のGlassmorphismオーディオプレーヤーで、ダークモードのサポートで応答性があります。JavaScript はありません。

プレビュー

HTMLコード 

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-200 via-pink-200 to-red-200 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4">
  <div class="bg-white bg-opacity-30 dark:bg-gray-700 dark:bg-opacity-30 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-lg max-w-sm w-full border border-white border-opacity-20 dark:border-gray-600 dark:border-opacity-20">
    <div class="flex items-center space-x-4 mb-4">
      <img class="w-16 h-16 rounded-lg shadow-md" src="https://picsum.photos/id/1040/80/80" alt="Album Art">
      <div class="flex-1">
        <h3 class="text-xl font-bold text-indigo-800 dark:text-indigo-300">Ocean Waves</h3>
        <p class="text-sm text-purple-700 dark:text-purple-300">Relaxation Sounds</p>
      </div>
    </div>
    <div class="relative mb-4">
      <div class="w-full bg-purple-200 rounded-full h-2 dark:bg-gray-600">
        <div class="bg-gradient-to-r from-indigo-500 to-pink-500 h-2 rounded-full" style="width: 70%;"></div>
      </div>
      <div class="flex justify-between text-xs text-purple-800 dark:text-purple-200 mt-1">
        <span>2:10</span>
        <span>3:05</span>
      </div>
    </div>
    <div class="flex items-center justify-center space-x-6">
      <button class="text-purple-800 dark:text-purple-200 focus:outline-none">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 5V.3c-4.9 1.1-8.5 5.7-8.5 11.2s3.6 10.1 8.5 11.2V19c-3.7 0-6.7-3-6.7-6.7S8.3 5.3 12 5zm0 14c3.9 0 7-3.1 7-7s-3.1-7-7-7v14zM16 12c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4z"></path>
        </svg>
      </button>
      <button class="bg-gradient-to-r from-indigo-600 to-pink-600 text-white p-3 rounded-full shadow-lg focus:outline-none transform hover:scale-105 transition duration-300">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
          <path d="M8 5v14l11-7z"></path>
        </svg>
      </button>
      <button class="text-purple-800 dark:text-purple-200 focus:outline-none">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 5V.3c-4.9 1.1-8.5 5.7-8.5 11.2s3.6 10.1 8.5 11.2V19c-3.7 0-6.7-3-6.7-6.7S8.3 5.3 12 5zm0 14c3.9 0 7-3.1 7-7s-3.1-7-7-7v14zM16 12c0 2.2-1.8 4-4 4s-4-1.8-4-4 1.8-4 4-4 4 1.8 4 4z"></path>
        </svg>
      </button>
    </div>
  </div>
</div>

関連コンポーネント

Glassmorphism オーディオ プレーヤー コンポーネント

シンプルで応答性の高いglassmorphismスタイルのオーディオプレーヤーコンポーネントで、紫/紫の配色で、製造/産業アプリケーション向けに設計されています。ダークモードのサポートが含まれています。

開ける

スキューモーフィックオーディオプレーヤー

スキューモーフィックスタイル、パステルカラースキーム、複雑なインターフェースでデザインされたオーディオプレーヤーコンポーネントです。ダークモードをサポートし、応答性が高く、eコマースサイトに適しています。

開ける

Bauhaus Audio Playerコンポーネント

バウハウスの原理に基づいて設計された、スポーツ/フィットネスアプリケーション向けの複雑でレスポンシブなオーディオプレーヤーコンポーネントで、ブラックとホワイトのベースに印象的なアクセントカラーが特徴です。再生コントロール、プログレスバー、ボリュームコントロール、トラックリスト、ダークモードのサポートが含まれています。

開ける