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

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

スキューモーフィック スタイルでデザインされたシンプルなオーディオ プレーヤー コンポーネントで、グレースケールの配色を使用し、ダーク モードをサポートします。

プレビュー

HTMLコード 

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

関連コンポーネント

ニューモルフィックオーディオプレーヤー

ダッシュボード用のアーストーンの配色を持つシンプルなNeumorphicオーディオプレーヤーコンポーネントで、Tailwind CSSで構築されています。レスポンシブデザインとダークテーマをサポートしています。

開ける

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

ダッシュボード用に設計された複雑なオーディオプレーヤーコンポーネントで、レスポンシブデザイン、ダークテーマのサポート、魅力的なマイクロインタラクションを備えています。

開ける

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

トライアドの配色と適度な複雑さを備えたブルータリズムのオーディオプレーヤーコンポーネントで、ダッシュボードに適しています。これは、Tailwind CSSで実装された、ダークテーマをサポートするレスポンシブデザインを特徴としています。

開ける