CCHub Logo CCHub Tailwind Collection
Komponenten Dateibetrachter Dateibetrachter-Komponente - Musik/Audio

Dateibetrachter-Komponente - Musik/Audio

Eine komplexe, reaktionsschnelle Dateibetrachtungskomponente, die für Musik- und Audioplattformen entwickelt wurde und sich durch eine Material-Design-Ästhetik mit lebendigen Farben und Unterstützung für den Dunkelmodus auszeichnet.

Vorschau

HTML-Code 

<div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-100 to-indigo-100 dark:from-gray-900 dark:to-gray-800 min-h-screen font-sans">

  <div class="max-w-7xl mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden md:flex">
    <!-- Left Pane: Navigation/Categories -->
    <div class="w-full md:w-1/4 p-4 sm:p-6 border-b md:border-b-0 md:border-r border-gray-200 dark:border-gray-700 bg-blue-50 dark:bg-gray-900">
      <h2 class="text-2xl font-bold mb-6 text-blue-800 dark:text-blue-400">My Music</h2>
      <ul class="space-y-3">
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl bg-blue-100 text-blue-900 dark:bg-blue-800 dark:text-blue-100 font-semibold shadow-md transition-all duration-300 hover:bg-blue-200 dark:hover:bg-blue-700">
            <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path></svg>
            Home
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300">
            <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24"><path d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"></path></svg>
            Playlists
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300">
            <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"></path></svg>
            Albums
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300">
            <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 12c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"></path></svg>
            Artists
          </a>
        </li>
        <li>
          <a href="#" class="flex items-center p-3 rounded-xl text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300">
            <svg class="w-6 h-6 mr-3" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3a9 9 0 00-9 9c0 4.97 4.03 9 9 9s9-4.03 9-9c0-4.97-4.03-9-9-9zm0 16c-3.87 0-7-3.13-7-7s3.13-7 7-7 7 3.13 7 7-3.13 7-7 7zm-1-8V7h2v4h4v2h-4v4h-2v-4H7v-2h4z"></path></svg>
            Add New
          </a>
        </li>
      </ul>
    </div>

    <!-- Right Pane: Main Content -->
    <div class="w-full md:w-3/4 p-4 sm:p-6 md:p-8 flex flex-col">
      <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-extrabold text-indigo-900 dark:text-indigo-400">Recently Played</h1>
        <div class="flex items-center space-x-3">
          <input type="text" placeholder="Search music..." class="px-4 py-2 rounded-full border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-400 dark:focus:ring-indigo-500 transition-all duration-300 w-32 sm:w-48 md:w-64">
          <button class="p-2 rounded-full bg-violet-600 text-white shadow-lg transform active:scale-95 transition-all duration-200 hover:bg-violet-700 focus:outline-none focus:ring-2 focus:ring-violet-500">
            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M19 12h-2v3h-3v2h3v3h2v-3h3v-2h-3v-3zM3 11V9h10v2H3zm0 3h7v2H3v-2zM3 7h14V5H3v2z"></path></svg>
          </button>
        </div>
      </div>

      <!-- File/Track Grid -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 flex-grow">

        <!-- Track Card 1 -->
        <div class="relative bg-white dark:bg-gray-700 rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden">
          <img src="https://picsum.photos/300/200?random=1" alt="Album Cover" class="w-full h-40 object-cover rounded-t-xl">
          <div class="p-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 line-clamp-1">Journey's End</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-1">Melodies of the Sky</p>
            <div class="mt-3 flex items-center justify-between">
              <span class="text-xs text-gray-500 dark:text-gray-400">3:45</span>
              <button class="p-2 bg-gradient-to-r from-pink-500 to-rose-500 text-white rounded-full shadow-md transform active:scale-90 transition-all duration-200 opacity-0 group-hover:opacity-100 -translate-x-full group-hover:translate-x-0">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
              </button>
            </div>
          </div>
          <div class="absolute top-2 right-2 flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
              <svg class="w-4 h-4" 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 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></svg>
            </button>
            <button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
            </button>
          </div>
        </div>

        <!-- Track Card 2 -->
        <div class="relative bg-white dark:bg-gray-700 rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden">
          <img src="https://picsum.photos/300/200?random=2" alt="Album Cover" class="w-full h-40 object-cover rounded-t-xl">
          <div class="p-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 line-clamp-1">Echoes of the Past</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-1">The Whispering Woods</p>
            <div class="mt-3 flex items-center justify-between">
              <span class="text-xs text-gray-500 dark:text-gray-400">4:10</span>
              <button class="p-2 bg-gradient-to-r from-pink-500 to-rose-500 text-white rounded-full shadow-md transform active:scale-90 transition-all duration-200 opacity-0 group-hover:opacity-100 -translate-x-full group-hover:translate-x-0">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
              </button>
            </div>
          </div>
          <div class="absolute top-2 right-2 flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
              <svg class="w-4 h-4" 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 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></svg>
            </button>
            <button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
            </button>
          </div>
        </div>

        <!-- Track Card 3 -->
        <div class="relative bg-white dark:bg-gray-700 rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden">
          <img src="https://picsum.photos/300/200?random=3" alt="Album Cover" class="w-full h-40 object-cover rounded-t-xl">
          <div class="p-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 line-clamp-1">Moonlit Serenade</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-1">Nightfall Orchestra</p>
            <div class="mt-3 flex items-center justify-between">
              <span class="text-xs text-gray-500 dark:text-gray-400">5:00</span>
              <button class="p-2 bg-gradient-to-r from-pink-500 to-rose-500 text-white rounded-full shadow-md transform active:scale-90 transition-all duration-200 opacity-0 group-hover:opacity-100 -translate-x-full group-hover:translate-x-0">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
              </button>
            </div>
          </div>
          <div class="absolute top-2 right-2 flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
              <svg class="w-4 h-4" 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 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></svg>
            </button>
            <button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
            </button>
          </div>
        </div>

        <!-- Track Card 4 -->
        <div class="relative bg-white dark:bg-gray-700 rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden">
          <img src="https://picsum.photos/300/200?random=4" alt="Album Cover" class="w-full h-40 object-cover rounded-t-xl">
          <div class="p-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 line-clamp-1">City Lights Dream</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-1">Urban Harmonics</p>
            <div class="mt-3 flex items-center justify-between">
              <span class="text-xs text-gray-500 dark:text-gray-400">3:15</span>
              <button class="p-2 bg-gradient-to-r from-pink-500 to-rose-500 text-white rounded-full shadow-md transform active:scale-90 transition-all duration-200 opacity-0 group-hover:opacity-100 -translate-x-full group-hover:translate-x-0">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
              </button>
            </div>
          </div>
          <div class="absolute top-2 right-2 flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
              <svg class="w-4 h-4" 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 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></svg>
            </button>
            <button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
            </button>
          </div>
        </div>

        <!-- Track Card 5 -->
        <div class="relative bg-white dark:bg-gray-700 rounded-xl shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300 group overflow-hidden">
          <img src="https://picsum.photos/300/200?random=5" alt="Album Cover" class="w-full h-40 object-cover rounded-t-xl">
          <div class="p-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-1 line-clamp-1">Forest Lullaby</h3>
            <p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-1">Nature's Symphony</p>
            <div class="mt-3 flex items-center justify-between">
              <span class="text-xs text-gray-500 dark:text-gray-400">2:58</span>
              <button class="p-2 bg-gradient-to-r from-pink-500 to-rose-500 text-white rounded-full shadow-md transform active:scale-90 transition-all duration-200 opacity-0 group-hover:opacity-100 -translate-x-full group-hover:translate-x-0">
                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
              </button>
            </div>
          </div>
          <div class="absolute top-2 right-2 flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
            <button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
              <svg class="w-4 h-4" 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 2zm5 11h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"></path></svg>
            </button>
            <button class="p-1 rounded-full bg-black bg-opacity-40 text-white hover:bg-opacity-60">
              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg>
            </button>
          </div>
        </div>

      </div>

      <!-- Paginator (Example) -->
      <div class="flex justify-center mt-8">
        <nav class="inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
          <a href="#" class="relative inline-flex items-center px-4 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
            <span class="sr-only">Previous</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd" />
            </svg>
          </a>
          <a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-indigo-600 text-sm font-medium text-white z-10 dark:border-indigo-500 dark:bg-indigo-600">
            1
          </a>
          <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
            2
          </a>
          <a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
            3
          </a>
          <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">...
          </span>
          <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
            10
          </a>
          <a href="#" class="relative inline-flex items-center px-4 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600">
            <span class="sr-only">Next</span>
            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
            </svg>
          </a>
        </nav>
      </div>

    </div>
  </div>

  <!-- Floating Action Button (FAB) / Global Player Control -->
  <div class="fixed bottom-6 right-6 z-50">
    <button class="w-16 h-16 rounded-full bg-gradient-to-r from-teal-400 to-cyan-600 text-white flex items-center justify-center shadow-2xl transform active:scale-90 transition-all duration-300 hover:shadow-cyan-400/50 focus:outline-none focus:ring-4 focus:ring-teal-300 dark:focus:ring-cyan-700">
      <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
      <span class="sr-only">Play Now</span>
    </button>
  </div>

</div>

Verwandte Komponenten

Datei-Viewer-Komponente

Eine nostalgische Dateibetrachter-Komponente, die von der Retro-Ästhetik der 80er/90er Jahre inspiriert ist, mit Tailwind CSS gestaltet wurde und reaktionsschnelle Effekte und dunkle Themen unterstützt.

Offen

Datei-Viewer-Komponente

Eine minimalistische und flache Design-Dateibetrachterkomponente, die sich für die Datenvisualisierung in einer Dashboard-Umgebung mit einem monochromatischen Farbschema und Unterstützung für dunkle Themen eignet.

Offen

Datei-Viewer-Komponente

Eine Dateibetrachterkomponente im Neumorphism-Stil, die mit Tailwind CSS entwickelt wurde. Es bietet responsives Design und Unterstützung für dunkle Themen.

Offen