오디오 플레이어

오디오 플레이어 구성 요소

트라이어딕 색 구성표와 적당한 복잡성을 가진 브루탈리즘 오디오 플레이어 구성 요소로, 대시보드에 적합합니다. Tailwind CSS로 구현된 어두운 테마 지원과 함께 반응형 디자인이 특징입니다.

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="bg-red-500 dark:bg-red-800 p-6 shadow-2xl border-4 border-black dark:border-white w-full max-w-md">
    <div class="flex justify-between items-center mb-4 border-b-4 border-black dark:border-white pb-2">
      <h2 class="text-2xl md:text-3xl font-extrabold text-black dark:text-white uppercase tracking-wider">Now Playing</h2>
      <div class="text-black dark:text-white text-lg font-bold">🔊</div>
    </div>
    
    <div class="flex items-center space-x-4 mb-6">
      <div class="w-20 h-20 bg-blue-500 dark:bg-blue-800 flex-shrink-0 border-2 border-black dark:border-white overflow-hidden">
        <img src="https://picsum.photos/80/80?random=1" alt="Album Art" class="w-full h-full object-cover grayscale">
      </div>
      <div class="flex-grow">
        <h3 class="text-xl md:text-2xl font-bold text-black dark:text-white uppercase leading-tight">Track Title Goes Here</h3>
        <p class="text-md md:text-lg text-black dark:text-white font-medium">Artist Name</p>
      </div>
    </div>
    
    <div class="mb-6">
      <div class="w-full bg-black dark:bg-white h-4 mb-2 relative border-2 border-black dark:border-white">
        <div class="bg-yellow-500 dark:bg-yellow-400 h-full" style="width: 60%;"></div>
        <div class="absolute -right-1 top-1/2 -translate-y-1/2 w-6 h-6 bg-black dark:bg-white border-2 border-black dark:border-white"></div>
      </div>
      <div class="flex justify-between text-black dark:text-white text-sm font-semibold">
        <span>2:30</span>
        <span>-1:45</span>
      </div>
    </div>
    
    <div class="grid grid-cols-3 gap-4 border-t-4 border-black dark:border-white pt-4">
      <button class="bg-black dark:bg-white text-yellow-500 dark:text-yellow-400 p-3 text-lg md:text-xl font-bold border-2 border-black dark:border-white flex items-center justify-center transform active:scale-95 transition-transform duration-100">
        ⏪
      </button>
      <button class="bg-yellow-500 dark:bg-yellow-400 text-black dark:text-white p-3 text-lg md:text-xl font-bold border-2 border-black dark:border-white flex items-center justify-center transform active:scale-95 transition-transform duration-100">
        ▶
      </button>
      <button class="bg-black dark:bg-white text-yellow-500 dark:text-yellow-400 p-3 text-lg md:text-xl font-bold border-2 border-black dark:border-white flex items-center justify-center transform active:scale-95 transition-transform duration-100">
        ⏩
      </button>
    </div>
    
    <div class="mt-6 pt-4 border-t-4 border-black dark:border-white">
      <div class="flex justify-between items-center mb-2">
        <span class="text-black dark:text-white font-bold text-sm">Volume</span>
        <span class="text-black dark:text-white text-sm">75%</span>
      </div>
      <div class="w-full bg-black dark:bg-white h-3 relative border-2 border-black dark:border-white">
        <div class="bg-blue-500 dark:bg-blue-800 h-full" style="width: 75%;"></div>
        <div class="absolute -right-1 top-1/2 -translate-y-1/2 w-5 h-5 bg-black dark:bg-white border-2 border-black dark:border-white"></div>
      </div>
    </div>
    
  </div>
</div>

오디오 플레이어 구성 요소

마이크로 인터랙션, 흙색 구성표, 적당한 복잡성 및 어두운 테마 지원을 갖춘 반응형 오디오 플레이어 구성 요소로 비즈니스/기업 웹 사이트에 적합합니다.

미리보기 열기

                <div class="p-4 bg-stone-100 dark:bg-stone-900 rounded-lg shadow-xl max-w-md mx-auto my-10 transform transition duration-500 hover:scale-105">
  <div class="flex items-center space-x-4">
    <div class="flex-shrink-0">
      <img class="h-16 w-16 rounded-lg object-cover shadow-lg" src="https://picsum.photos/seed/audio-art/100/100" alt="Album Art">
    </div>
    <div class="flex-grow">
      <h3 class="text-lg font-semibold text-stone-800 dark:text-stone-200">Whispering Pines</h3>
      <p class="text-sm text-stone-600 dark:text-stone-400">Nature Sounds Co.</p>
    </div>
    <button class="p-3 rounded-full bg-stone-300 dark:bg-stone-700 text-stone-700 dark:text-stone-300 transform transition duration-300 hover:scale-110 hover:bg-stone-400 dark:hover:bg-stone-600 focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-50">
      <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
        <path d="M8 5v14l11-7z"/>
      </svg>
    </button>
  </div>

  <div class="mt-5">
    <div class="flex items-center space-x-3">
      <span class="text-xs text-stone-600 dark:text-stone-400">0:45</span>
      <div class="flex-grow bg-stone-300 dark:bg-stone-700 rounded-full h-2">
        <div class="bg-amber-700 dark:bg-amber-500 h-2 rounded-full" style="width: 45%;"></div>
      </div>
      <span class="text-xs text-stone-600 dark:text-stone-400">3:20</span>
    </div>

    <div class="flex justify-between items-center mt-4">
      <button class="p-2 rounded-full text-stone-600 dark:text-stone-400 transform transition duration-300 hover:scale-110 hover:text-stone-800 dark:hover:text-stone-200 focus:outline-none">
        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
      </button>
      <button class="p-2 rounded-full text-stone-600 dark:text-stone-400 transform transition duration-300 hover:scale-110 hover:text-stone-800 dark:hover:text-stone-200 focus:outline-none">
        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M18 18l-8.5-6L18 6v12zM6 6v12h2V6H6z"/></svg>
      </button>
      <button class="p-2 rounded-full text-stone-600 dark:text-stone-400 transform transition duration-300 hover:scale-110 hover:text-stone-800 dark:hover:text-stone-200 focus:outline-none">
        <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 4.5V19.5M19.5 12H4.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </button>
      
      <div class="relative group">
        <button class="p-2 rounded-full text-stone-600 dark:text-stone-400 transform transition duration-300 hover:scale-110 hover:text-stone-800 dark:hover:text-stone-200 focus:outline-none">
          <svg class="h-5 w-5" 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 2zm-1 15v-7h2v7h-2zm0-9V7h2v1h-2z"/></svg>
        </button>
        <span class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-1 bg-stone-700 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap">Volume Control</span>
      </div>
    </div>
  </div>
</div>

스큐어모픽 오디오 플레이어

스큐어모픽 스타일, 파스텔 색상 구성표 및 복잡한 인터페이스로 설계된 오디오 플레이어 구성 요소입니다. 다크 모드를 지원하며 반응형으로 전자 상거래 사이트에 적합합니다.

미리보기 열기

                <div class="flex items-center justify-center min-h-screen bg-gray-50 dark:bg-gray-900 p-4">
  <div class="w-full max-w-md bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-800 rounded-2xl shadow-xl p-6 relative overflow-hidden transform transition-all duration-300 hover:scale-[1.02] active:scale-[0.98] focus:scale-[1.01] outline-none"
    tabindex="0" aria-label="Audio Player with complex controls">

    <!-- Top Controls and Display -->
    <div class="flex items-center justify-between mb-6">

      <div class="text-gray-600 dark:text-gray-300">
        <i class="fas fa-bars text-xl"></i>
      </div>

      <div class="text-center flex-grow">
        <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-200 uppercase tracking-wide">Now Playing</h3>
        <p class="text-xs text-gray-500 dark:text-gray-400">Pastel Vibes</p>
      </div>

      <div class="text-gray-600 dark:text-gray-300">
        <i class="fas fa-heart text-xl"></i>
      </div>
    </div>

    <!-- Album Art / Display Area -->
    <div class="relative w-48 h-48 mx-auto mb-8 rounded-full shadow-inner-lg transform transition-transform duration-300 group hover:rotate-3 active:rotate-[-3deg] focus:rotate-2">
      <img src="https://picsum.photos/300/300?random=1" alt="Album Art" class="w-full h-full rounded-full object-cover shadow-md border-4 border-gray-400 dark:border-gray-600 transform transition-transform duration-300 group-hover:scale-105" />
      <div class="absolute inset-0 rounded-full border-2 border-dashed border-gray-400 dark:border-gray-500 animate-spin-slow"></div>
    </div>

    <!-- Song Info -->
    <div class="text-center mb-6">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-1">Dreamy Horizon</h2>
      <p class="text-md text-gray-600 dark:text-gray-300">Acoustic Serenity</p>
    </div>

    <!-- Progress Bar (Skeuomorphic) -->
    <div class="mb-8">
      <div class="h-3 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner-sm relative">
        <div class="absolute inset-y-0 left-0 bg-gradient-to-r from-pink-300 to-purple-400 dark:from-pink-500 dark:to-purple-600 rounded-full w-2/3 shadow-md"></div>
        <div class="absolute -right-2 top-1/2 -translate-y-1/2 w-5 h-5 bg-white border-2 border-gray-400 dark:border-gray-600 rounded-full shadow-lg cursor-pointer transform hover:scale-110 transition-transform duration-200" role="slider" aria-valuenow="66" aria-valuemin="0" aria-valuemax="100" aria-label="Playback progress"></div>
      </div>
      <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-2">
        <span>2:30</span>
        <span>4:15</span>
      </div>
    </div>

    <!-- Main Controls -->
    <div class="flex items-center justify-around mb-8">

      <button class="w-12 h-12 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75" aria-label="Previous track">
        <i class="fas fa-backward text-xl text-gray-600 dark:text-gray-300"></i>
      </button>

      <button class="w-16 h-16 flex items-center justify-center rounded-full bg-gradient-to-br from-pink-300 to-purple-400 dark:from-pink-500 dark:to-purple-600 shadow-xl hover:shadow-2xl transition-all duration-200 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-opacity-75" aria-label="Play/Pause">
        <i class="fas fa-play text-2xl text-white"></i>
      </button>

      <button class="w-12 h-12 flex items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800 shadow-md hover:shadow-lg transition-all duration-200 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75" aria-label="Next track">
        <i class="fas fa-forward text-xl text-gray-600 dark:text-gray-300"></i>
      </button>
    </div>

    <!-- Additional Controls -->
    <div class="flex items-center justify-around text-gray-500 dark:text-gray-400 text-lg">
      <button class="hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75" aria-label="Repeat">
        <i class="fas fa-redo-alt"></i>
      </button>
      <button class="hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75" aria-label="Shuffle">
        <i class="fas fa-random"></i>
      </button>
      <button class="hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75" aria-label="Volume">
        <i class="fas fa-volume-up"></i>
      </button>
      <button class="hover:text-gray-700 dark:hover:text-gray-200 transition-colors duration-200 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75" aria-label="Playlist">
        <i class="fas fa-list"></i>
      </button>
    </div>

  </div>
</div>

<!-- To ensure icons are displayed, include Font Awesome via CDN in your project's HTML head -->
<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" /> -->

3D 단색 오디오 플레이어

Portfolio를 위한 반응형 3D 단색 오디오 플레이어 구성 요소, 다크 모드 지원

미리보기 열기

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
  <div class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-sm p-6 transform transition-all duration-300 hover:scale-105">
    <!-- 3D Effect Base -->
    <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-700 dark:to-gray-900 rounded-lg opacity-50 transform translate-x-2 translate-y-2"></div>

    <div class="relative z-10">
      <!-- Album Art (Placeholder with 3D depth) -->
      <div class="w-full h-48 bg-gray-300 dark:bg-gray-700 rounded-md mb-4 overflow-hidden relative">
        <img src="https://picsum.photos/400/300" alt="Album Art" class="w-full h-full object-cover transform transition-transform duration-300 hover:scale-110">
        <!-- Simple Overlay for Depth -->
        <div class="absolute inset-0 bg-black opacity-10"></div>
      </div>

      <!-- Song Title and Artist -->
      <div class="text-center mb-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white">Song Title Goes Here</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400">Artist Name</p>
      </div>

      <!-- Progress Bar (Simple 3D look) -->
      <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2.5 mb-4 relative">
        <div class="bg-blue-500 dark:bg-blue-400 h-2.5 rounded-full" style="width: 50%;"></div>
        <!-- Simple highlight for 3D effect -->
        <div class="absolute top-0 left-0 h-full bg-white opacity-20 rounded-full" style="width: 50%;"></div>
      </div>

      <!-- Controls (Simple, with potential for interactive 3D effect on hover) -->
      <div class="flex justify-center space-x-6">
        <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none transform transition-transform duration-150 hover:scale-110">
          <!-- Simple SVG Placeholder for Previous Button -->
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
          </svg>
        </button>
        <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none transform transition-transform duration-150 hover:scale-125">
          <!-- Simple SVG Placeholder for Play Button -->
          <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197 2.132A1 1 0 0010 14.17V9.83a1 1 0 001.555-.832l3.197 2.132a1 1 0 010 1.664z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
        </button>
        <button class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white focus:outline-none transform transition-transform duration-150 hover:scale-110">
          <!-- Simple SVG Placeholder for Next Button -->
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

뉴모픽 오디오 플레이어

대시보드용 어스 톤 색상 스키마가 있는 간단한 뉴모픽 오디오 플레이어 컴포넌트로, Tailwind CSS로 빌드되었습니다. 반응형 디자인과 어두운 테마를 지원합니다.

미리보기 열기

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-4">
  <div class="w-full max-w-sm bg-gray-300 dark:bg-gray-700 rounded-xl p-6 shadow-neumorphic-light dark:shadow-neumorphic-dark">
    <div class="flex items-center mb-4">
      <img class="w-16 h-16 rounded-full mr-4 shadow-neumorphic-light dark:shadow-neumorphic-dark" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Album Art">
      <div>
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Song Title</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400">Artist Name</p>
      </div>
    </div>
    <div class="w-full h-2 bg-gray-400 dark:bg-gray-600 rounded-full mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
      <div class="w-1/2 h-full bg-green-600 dark:bg-green-500 rounded-full"></div>
    </div>
    <div class="flex items-center justify-around">
      <button class="p-3 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-700 dark:text-gray-300 hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path></svg>
      </button>
      <button class="p-4 rounded-full bg-green-500 dark:bg-green-600 shadow-neumorphic-light dark:shadow-neumorphic-dark text-white hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed transform scale-110">
        <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 20 20"><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"></path></svg>
      </button>
      <button class="p-3 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-700 dark:text-gray-300 hover:shadow-neumorphic-light-pressed dark:hover:shadow-neumorphic-dark-pressed">
        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
      </button>
    </div>
  </div>
</div>

<style>.shadow-neumorphic-light { box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff; } .dark .shadow-neumorphic-dark { box-shadow: 7px 7px 15px #4a4a4a, -7px -7px 15px #969696; } .shadow-inner-neumorphic-light { box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff; } .dark .shadow-inner-neumorphic-dark { box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #969696; } .hover\:shadow-neumorphic-light-pressed:hover { box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff; } .dark .hover\:shadow-neumorphic-dark-pressed:hover { box-shadow: inset 5px 5px 10px #4a4a4a, inset -5px -5px 10px #969696; }</style>

뉴모피즘 오디오 플레이어

재생, 일시 중지, 건너뛰기 및 볼륨 제어 기능이 있는 Neumorphism 스타일의 오디오 플레이어 구성 요소로, 비즈니스 웹 사이트를 위해 설계되었습니다. 진행률 표시줄, 노래 제목, 아티스트 및 앨범 아트가 포함되어 있습니다. Tailwind CSS를 사용한 반응형 디자인 및 다크 모드 지원이 포함됩니다.

미리보기 열기

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-900 p-4">
  <div class="w-full max-w-md bg-gray-200 dark:bg-gray-800 rounded-xl p-6 shadow-xl dark:shadow-xl-dark">
    <div class="flex flex-col items-center">
      <div class="w-32 h-32 bg-gray-300 dark:bg-gray-700 rounded-full shadow-inner dark:shadow-inner-dark flex items-center justify-center">
        <img src="https://picsum.photos/128" alt="Album Artwork" class="rounded-full w-full h-full object-cover">
      </div>
      <h3 class="mt-4 text-lg font-semibold text-gray-800 dark:text-gray-200">Song Title</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400">Artist Name - Album Name</p>
    </div>

    <div class="w-full mt-6">
      <div class="flex items-center justify-between text-gray-600 dark:text-gray-400 text-xs">
        <span>0:00</span>
        <span>3:45</span>
      </div>
      <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2 mt-1 shadow-inner dark:shadow-inner-dark">
        <div class="bg-blue-500 h-2 rounded-full" style="width: 30%;"></div>
      </div>
    </div>

    <div class="flex items-center justify-around mt-8">
      <button class="w-12 h-12 bg-gray-200 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-neumorphic dark:shadow-neumorphic-dark">
        <svg class="w-6 h-6 text-gray-700 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
      <button class="w-16 h-16 bg-gray-200 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-neumorphic-lg dark:shadow-neumorphic-lg-dark">
        <svg class="w-8 h-8 text-blue-600 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20">
          <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"></path>
        </svg>
      </button>
      <button class="w-12 h-12 bg-gray-200 dark:bg-gray-800 rounded-full flex items-center justify-center shadow-neumorphic dark:shadow-neumorphic-dark">
        <svg class="w-6 h-6 text-gray-700 dark:text-gray-300" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        </svg>
      </button>
    </div>

    <div class="flex items-center mt-6">
      <svg class="w-5 h-5 text-gray-600 dark:text-gray-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M9.384 4.464A1 1 0 0110 4v12a1 1 0 01-1.707.707L6 14H3a1 1 0 01-1-1V7a1 1 0 011-1h3l2.293-2.293a1 1 0 011.091-.243zM14.003 7.77a.75.75 0 01.412 1.367l-3.495 1.896-.943-.943 3.496-1.897z" clip-rule="evenodd"></path>
      </svg>
      <div class="w-full bg-gray-300 dark:bg-gray-700 rounded-full h-2 shadow-inner dark:shadow-inner-dark">
        <div class="bg-blue-500 h-2 rounded-full" style="width: 60%;"></div>
      </div>
      <svg class="w-5 h-5 text-gray-600 dark:text-gray-400 ml-2" fill="currentColor" viewBox="0 0 20 20">
        <path fill-rule="evenodd" d="M17.707 9.293a1 1 0 010 1.414l-b b a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414zm-1.414 4.242a1 1 0 10-1.414 1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
        <path d="M1.723 13.863a1 1 0 00-.723.451l-1 1.5A1 1 0 001 18.122V19a1 1 0 001 1h1a1 1 0 001-1v-.878A1 1 0 003.723 18L3 16.863a1 1 0 00-.723-.451zM4 5a1 1 0 00-1 1v8a1 1 0 001 1h2a1 1 0 001-1V6a1 1 0 00-1-1H4z" clip-rule="evenodd"></path>
      </svg>
    </div>
  </div>
</div>

<style>
  .shadow-xl-dark {
    box-shadow: 7px 7px 15px #1f1f1f, -7px -7px 15px #2d2d2d;
  }
  .shadow-inner-dark {
    box-shadow: inset 5px 5px 10px #1f1f1f, inset -5px -5px 10px #2d2d2d;
  }
  .shadow-neumorphic {
    box-shadow: 5px 5px 10px #b0b0b0, -5px -5px 10px #ffffff;
  }
  .shadow-neumorphic-dark {
    box-shadow: 5px 5px 10px #1f1f1f, -5px -5px 10px #2d2d2d;
  }
  .shadow-neumorphic-lg {
     box-shadow: 8px 8px 15px #b0b0b0, -8px -8px 15px #ffffff;
  }
  .shadow-neumorphic-lg-dark {
     box-shadow: 8px 8px 15px #1f1f1f, -8px -8px 15px #2d2d2d;
  }
</style>