CCHub Logo CCHub Tailwind Collection
구성 요소 오디오 플레이어 뉴모픽 오디오 플레이어

뉴모픽 오디오 플레이어

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

미리 보기

HTML 코드 

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

관련 구성 요소

Memphis_Audio_Player_Component

멤피스 디자인(Memphis Design)에서 영감을 받은 반응형 오디오 플레이어 구성 요소로, 대담한 기하학적 모양과 따뜻한 뉴트럴 컬러가 특징이며 다크 모드를 지원합니다.

열다

Glassmorphism 오디오 플레이어

대시보드를 위한 생생한 색상의 Glassmorphism 오디오 플레이어, 다크 모드 지원으로 반응합니다. 자바스크립트가 없습니다.

열다

뉴모피즘 오디오 플레이어

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

열다