CCHub Logo CCHub Tailwind Collection
Komponenten Audioplayer (Audioplayer) Audio-Player-Komponente

Audio-Player-Komponente

Eine einfache Audioplayer-Komponente, die in einem skeuomorphen Stil entwickelt wurde, ein Graustufen-Farbschema verwendet und den Dunkelmodus unterstützt.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Skeuomorpher Audioplayer

Eine Audioplayer-Komponente, die mit einem Skeuomorphen Stil, einem pastellfarbenen Farbschema und einer komplexen Benutzeroberfläche gestaltet wurde. Es unterstützt den Dunkelmodus und ist reaktionsschnell, geeignet für E-Commerce-Websites.

Offen

Audio-Player-Komponente

Eine komplexe Audioplayer-Komponente, die für ein Dashboard entwickelt wurde, mit responsivem Design, Unterstützung für dunkle Themen und ansprechenden Mikrointeraktionen.

Offen

Neumorpher Audioplayer

Eine einfache Neumorphic Audio Player-Komponente mit Erdtönen-Farbschema für ein Dashboard, erstellt mit Tailwind CSS. Es unterstützt responsives Design und dunkles Design.

Offen