Composants Disposition de la grille Monospace/Developer - Composant de disposition de grille musicale/audio

Monospace/Developer - Composant de disposition de grille musicale/audio

Un composant de mise en page de grille simple et réactif pour les plates-formes musicales/audio, conçu avec une esthétique monospace/développeur utilisant des neutres chauds. Inclut la prise en charge du mode sombre.

Aperçu

HTML Code

<div class="bg-stone-50 text-stone-800 dark:bg-zinc-900 dark:text-stone-200 p-4 font-mono min-h-screen">
  <h1 class="text-3xl md:text-4xl lg:text-5xl font-bold mb-8 text-center text-stone-900 dark:text-stone-100 mt-4">
    <span class="block">_PLAYBACK_LIST_</span>
    <span class="text-sm md:text-base lg:text-lg opacity-75 mt-2">&gt; catalog/library/all_tracks.m3u</span>
  </h1>

  <div class="max-w-7xl mx-auto grid gap-6 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

    <!-- Track Card 1 -->
    <div class="bg-stone-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden border border-stone-200 dark:border-zinc-700 relative group">
      <div class="absolute top-2 left-2 bg-amber-300 dark:bg-amber-600 px-2 py-1 text-xs text-stone-900 dark:text-stone-50 rounded-sm font-bold opacity-0 group-hover:opacity-100 transition-opacity duration-300">
        NOW PLAYING
      </div>
      <img src="https://picsum.photos/seed/music1/400/300" alt="Album Cover" class="w-full h-48 object-cover border-b border-stone-200 dark:border-zinc-700">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100 leading-tight mb-1">_ArtistName_ - _TrackTitle_</h3>
        <p class="text-sm text-stone-600 dark:text-stone-400 mb-2">[GENRE] ~ (2023)</p>
        <div class="flex items-center text-sm text-stone-500 dark:text-stone-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-amber-500 dark:text-amber-400" viewBox="0 0 20 20" fill="currentColor">
            <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" />
          </svg>
          <span class="mr-2">3:45</span>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-stone-500 dark:text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.032 2.032M17.89 5.112l-2.032 2.032M10 9v6m-4-6h-2a2 2 0 00-2 2v4a2 2 0 002 2h4v-2.031M15 15h2a2 2 0 002-2V9a2 2 0 00-2-2h-2v10m-4-10v6m0 0h4v-6h-4z" />
          </svg>
          <span>1.2M listens</span>
        </div>
        <button class="mt-4 w-full bg-amber-400 dark:bg-amber-600 text-stone-900 dark:text-stone-50 py-2 rounded-md hover:bg-amber-500 dark:hover:bg-amber-700 transition-colors duration-200 text-sm font-bold border-2 border-transparent hover:border-amber-700 dark:hover:border-amber-400">
           &gt; Play Track
        </button>
      </div>
    </div>

    <!-- Track Card 2 -->
    <div class="bg-stone-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden border border-stone-200 dark:border-zinc-700 relative group">
      <img src="https://picsum.photos/seed/music2/400/300" alt="Album Cover" class="w-full h-48 object-cover border-b border-stone-200 dark:border-zinc-700">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100 leading-tight mb-1">_ArtistName_ - _AnotherHit_</h3>
        <p class="text-sm text-stone-600 dark:text-stone-400 mb-2">[AMBIENT] ~ (2022)</p>
        <div class="flex items-center text-sm text-stone-500 dark:text-stone-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-amber-500 dark:text-amber-400" viewBox="0 0 20 20" fill="currentColor">
            <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" />
          </svg>
          <span class="mr-2">4:10</span>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-stone-500 dark:text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.032 2.032M17.89 5.112l-2.032 2.032M10 9v6m-4-6h-2a2 2 0 00-2 2v4a2 2 0 002 2h4v-2.031M15 15h2a2 2 0 002-2V9a2 2 0 00-2-2h-2v10m-4-10v6m0 0h4v-6h-4z" />
          </svg>
          <span>870K listens</span>
        </div>
        <button class="mt-4 w-full bg-amber-400 dark:bg-amber-600 text-stone-900 dark:text-stone-50 py-2 rounded-md hover:bg-amber-500 dark:hover:bg-amber-700 transition-colors duration-200 text-sm font-bold border-2 border-transparent hover:border-amber-700 dark:hover:border-amber-400">
          &gt; Play Track
        </button>
      </div>
    </div>

    <!-- Track Card 3 -->
    <div class="bg-stone-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden border border-stone-200 dark:border-zinc-700 relative group">
      <img src="https://picsum.photos/seed/music3/400/300" alt="Album Cover" class="w-full h-48 object-cover border-b border-stone-200 dark:border-zinc-700">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100 leading-tight mb-1">_GroupName_ - _LatestSingle_</h3>
        <p class="text-sm text-stone-600 dark:text-stone-400 mb-2">[ELECTRONIC] ~ (2024)</p>
        <div class="flex items-center text-sm text-stone-500 dark:text-stone-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-amber-500 dark:text-amber-400" viewBox="0 0 20 20" fill="currentColor">
            <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" />
          </svg>
          <span class="mr-2">3:15</span>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-stone-500 dark:text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.032 2.032M17.89 5.112l-2.032 2.032M10 9v6m-4-6h-2a2 2 0 00-2 2v4a2 2 0 002 2h4v-2.031M15 15h2a2 2 0 002-2V9a2 2 0 00-2-2h-2v10m-4-10v6m0 0h4v-6h-4z" />
          </svg>
          <span>2.1M listens</span>
        </div>
        <button class="mt-4 w-full bg-amber-400 dark:bg-amber-600 text-stone-900 dark:text-stone-50 py-2 rounded-md hover:bg-amber-500 dark:hover:bg-amber-700 transition-colors duration-200 text-sm font-bold border-2 border-transparent hover:border-amber-700 dark:hover:border-amber-400">
          &gt; Play Track
        </button>
      </div>
    </div>

    <!-- Track Card 4 -->
    <div class="bg-stone-100 dark:bg-zinc-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden border border-stone-200 dark:border-zinc-700 relative group">
      <img src="https://picsum.photos/seed/music4/400/300" alt="Album Cover" class="w-full h-48 object-cover border-b border-stone-200 dark:border-zinc-700">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-stone-900 dark:text-stone-100 leading-tight mb-1">_ProducerAlias_ - _OldSchoolVibe_</h3>
        <p class="text-sm text-stone-600 dark:text-stone-400 mb-2">[LOFI] ~ (2021)</p>
        <div class="flex items-center text-sm text-stone-500 dark:text-stone-400">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-amber-500 dark:text-amber-400" viewBox="0 0 20 20" fill="currentColor">
            <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" />
          </svg>
          <span class="mr-2">2:58</span>
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-stone-500 dark:text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.032 2.032M17.89 5.112l-2.032 2.032M10 9v6m-4-6h-2a2 2 0 00-2 2v4a2 2 0 002 2h4v-2.031M15 15h2a2 2 0 002-2V9a2 2 0 00-2-2h-2v10m-4-10v6m0 0h4v-6h-4z" />
          </svg>
          <span>950K listens</span>
        </div>
        <button class="mt-4 w-full bg-amber-400 dark:bg-amber-600 text-stone-900 dark:text-stone-50 py-2 rounded-md hover:bg-amber-500 dark:hover:bg-amber-700 transition-colors duration-200 text-sm font-bold border-2 border-transparent hover:border-amber-700 dark:hover:border-amber-400">
          &gt; Play Track
        </button>
      </div>
    </div>

  </div>

  <footer class="text-center text-sm text-stone-500 dark:text-zinc-600 mt-12 p-4">
    <p>_CATALOG_END_ &gt; // End of playable tracks. Use 'search' or 'add_item' commands.</p>
  </footer>
</div>

Composants associés

Composant de mise en page de grille

Un composant de mise en page de grille réactif avec un design rétro/vintage, avec une esthétique nostalgique des années 80/90. Le composant comprend des images d’espace réservé et des avatars avec prise en charge du mode sombre.

Ouvrir

Disposition simple de la grille brutaliste

Un composant de mise en page de grille brutaliste simple et réactif avec prise en charge des tons de terre et du mode sombre, adapté aux sites Web d’entreprise.

Ouvrir

FinancialGridWithInteractions

Un composant de mise en page de grille réactif pour les interfaces financières/bancaires, avec des couleurs à contraste élevé et des micro-interactions subtiles au survol. Prend en charge le mode sombre et est conçu pour une complexité modérée.

Ouvrir