CCHub Logo CCHub Tailwind Collection
コンポーネント 評価システム Bauhaus_Music_Rating_System

Bauhaus_Music_Rating_System

バウハウスにインスパイアされたデザインのレスポンシブ音楽/オーディオレーティングシステムコンポーネントで、パープル/バイオレットの配色を使用しています。ダークモードのサポートとインタラクティブな星評価機能が含まれています(ビジュアルのみ、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>

関連コンポーネント

レトロレーティングシステムコンポーネント

ビジネス/企業のWebサイト向けに設計された、アースカラーのレトロ/ビンテージ評価システムコンポーネント。レスポンシブデザインとダークテーマをサポートしています。

開ける

レーティングシステムコンポーネント

ミニマリスト/フラットデザイン、グレースケールの配色、レスポンシブデザイン、Tailwind CSSを使用したダークテーマのサポートを備えたeコマース向けの複雑な評価システムコンポーネント。JavaScript はありません。画像とアバターには picsum.photos と randomuser.me を使用します。

開ける

レーティングシステムコンポーネント24

ダークテーマとレスポンシブエフェクトをサポートする3Dデザインのレーティングシステムコンポーネント。このコンポーネントは、評価、ユーザーアバター、コメントセクションの星を備えています。

開ける