구성 요소 그리드 레이아웃 모노스페이스/개발자 - 음악/오디오 그리드 레이아웃 컴포넌트
모노스페이스/개발자 - 음악/오디오 그리드 레이아웃 컴포넌트

음악/오디오 플랫폼을 위한 간단하고 반응이 빠른 그리드 레이아웃 구성 요소로, 따뜻한 중립을 사용하여 고정공간/개발자 미학으로 설계되었습니다. 다크 모드 지원이 포함됩니다.
미리 보기

HTML 코드

<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>
모노스페이스/개발자 - 음악/오디오 그리드 레이아웃 컴포넌트

미리 보기

HTML 코드

관련 구성 요소

레트로/빈티지 이커머스 그리드 레이아웃

아트데코에듀케이션그리드

Watercolor_Artistic_Dashboard_Grid_Layout
