CCHub Logo CCHub Tailwind Collection
구성 요소 등급 시스템 Bauhaus_Music_Rating_System

Bauhaus_Music_Rating_System

반응형 음악/오디오 등급 시스템 구성 요소로, Bauhaus에서 영감을 받은 디자인으로 보라색/보라색 색 구성표를 사용합니다. 다크 모드 지원 및 대화형 별 등급 기능(시각적인 만, JS 제외)이 포함됩니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center min-h-screen p-4 bg-gray-50 dark:bg-gray-950 font-sans">
  <div class="w-full max-w-sm p-6 rounded-lg shadow-xl bg-white dark:bg-gray-800 transition-colors duration-300 transform border-2 border-purple-300 dark:border-purple-700">
    <h2 class="text-2xl font-bold mb-4 text-purple-800 dark:text-purple-200 text-center uppercase tracking-wider">Rate This Track</h2>

    <div class="flex justify-center mb-6">
      <img src="https://picsum.photos/120/120?random=1" alt="Album Art" class="w-24 h-24 sm:w-32 sm:h-32 rounded-lg object-cover border-2 border-purple-500 dark:border-purple-400 shadow-md">
    </div>

    <div class="text-center mb-6">
      <p class="text-lg font-semibold text-gray-900 dark:text-gray-100">"Cosmic Echoes"</p>
      <p class="text-sm text-gray-600 dark:text-gray-400">AstroFunk Collective</p>
    </div>

    <div class="flex justify-center space-x-2 text-3xl sm:text-4xl text-gray-400 dark:text-gray-600 mb-6">
      <button class="star-button focus:outline-none text-purple-500 dark:text-purple-400 hover:text-purple-600 dark:hover:text-purple-300 transform hover:scale-110 active:scale-95 transition-transform duration-150" aria-label="1 star">
        &#9733;
      </button>
      <button class="star-button focus:outline-none text-purple-500 dark:text-purple-400 hover:text-purple-600 dark:hover:text-purple-300 transform hover:scale-110 active:scale-95 transition-transform duration-150" aria-label="2 stars">
        &#9733;
      </button>
      <button class="star-button focus:outline-none text-purple-500 dark:text-purple-400 hover:text-purple-600 dark:hover:text-purple-300 transform hover:scale-110 active:scale-95 transition-transform duration-150" aria-label="3 stars">
        &#9733;
      </button>
      <button class="star-button focus:outline-none text-gray-400 dark:text-gray-600 hover:text-purple-600 dark:hover:text-purple-300 transform hover:scale-110 active:scale-95 transition-transform duration-150" aria-label="4 stars">
        &#9733;
      </button>
      <button class="star-button focus:outline-none text-gray-400 dark:text-gray-600 hover:text-purple-600 dark:hover:text-purple-300 transform hover:scale-110 active:scale-95 transition-transform duration-150" aria-label="5 stars">
        &#9733;
      </button>
    </div>

    <button class="w-full py-3 bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600 text-white font-semibold rounded-md shadow-lg transition-colors duration-200 transform focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-75 uppercase tracking-wide">
      Submit Rating
    </button>
  </div>
</div>

관련 구성 요소

Monospace Forest Rating System 구성 요소

포트폴리오에 적합한 포레스트 그린 팔레트가 있는 깔끔한 코드에서 영감을 받은 등급 시스템 구성 요소입니다. 등급을 매기기 위한 대화형 별표가 특징이며 평균 등급을 표시하며 다크 모드 지원으로 완벽하게 반응합니다.

열다

등급 시스템 구성 요소

미니멀리스트/플랫 디자인, 그레이스케일 색 구성표, 반응형 디자인 및 Tailwind CSS를 사용한 어두운 테마 지원을 갖춘 전자 상거래를 위한 복잡한 평가 시스템 구성 요소입니다. 자바스크립트가 없습니다. 이미지 및 아바타에 picsum.photos 및 randomuser.me 를 사용합니다.

열다

등급 시스템 구성 요소

Retro/Vintage Rating System Complementary Color Scheme을 사용한 전자 상거래를 위한 구성 요소.Dark Mode 지원으로 반응형. JavaScript가 필요하지 않으며 Tailwind CSS가 있는 HTML만 있으면 됩니다.

열다