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

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

豊かな宝石の色調で設計されたシンプルで魅力的な評価システムコンポーネントで、ドキュメントやナレッジベースサイトにマイクロインタラクションフィードバックを提供します。完全にレスポンシブで、ダークモードをサポートします。

プレビュー

HTMLコード 

<div class="flex flex-col items-center justify-center p-6 bg-gray-50 dark:bg-gray-900 min-h-screen">
  <div class="bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6 sm:p-8 md:p-10 max-w-sm w-full transition-all duration-300 ease-in-out transform hover:scale-105">
    <h3 class="text-xl sm:text-2xl font-bold text-gray-800 dark:text-gray-100 text-center mb-6">
      How useful was this article?
    </h3>
    <div class="flex justify-center space-x-2 sm:space-x-3 mb-6">
      <button aria-label="1 star rating" class="group p-2 rounded-full transition-all duration-200 ease-in-out hover:bg-red-500/20 active:scale-90">
        <svg class="w-8 h-8 sm:w-9 sm:h-9 text-red-500 group-hover:text-red-600 dark:text-red-400 dark:group-hover:text-red-500 transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69L9.049 2.927z"></path>
        </svg>
      </button>
      <button aria-label="2 star rating" class="group p-2 rounded-full transition-all duration-200 ease-in-out hover:bg-orange-500/20 active:scale-90">
        <svg class="w-8 h-8 sm:w-9 sm:h-9 text-orange-500 group-hover:text-orange-600 dark:text-orange-400 dark:group-hover:text-orange-500 transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69L9.049 2.927z"></path>
        </svg>
      </button>
      <button aria-label="3 star rating" class="group p-2 rounded-full transition-all duration-200 ease-in-out hover:bg-amber-500/20 active:scale-90">
        <svg class="w-8 h-8 sm:w-9 sm:h-9 text-amber-500 group-hover:text-amber-600 dark:text-amber-400 dark:group-hover:text-amber-500 transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69L9.049 2.927z"></path>
        </svg>
      </button>
      <button aria-label="4 star rating" class="group p-2 rounded-full transition-all duration-200 ease-in-out hover:bg-emerald-500/20 active:scale-90">
        <svg class="w-8 h-8 sm:w-9 sm:h-9 text-emerald-500 group-hover:text-emerald-600 dark:text-emerald-400 dark:group-hover:text-emerald-500 transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69L9.049 2.927z"></path>
        </svg>
      </button>
      <button aria-label="5 star rating" class="group p-2 rounded-full transition-all duration-200 ease-in-out hover:bg-indigo-500/20 active:scale-90">
        <svg class="w-8 h-8 sm:w-9 sm:h-9 text-indigo-500 group-hover:text-indigo-600 dark:text-indigo-400 dark:group-hover:text-indigo-500 transition-colors duration-200" fill="currentColor" viewBox="0 0 20 20">
          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69L9.049 2.927z"></path>
        </svg>
      </button>
    </div>
    <p class="text-sm text-gray-500 dark:text-gray-400 text-center">
      Click a star to rate
    </p>
  </div>
</div>

関連コンポーネント

バウハウスパステルレーティングシステムコンポーネント

幾何学的なフォルムとパステルカラーを備えたレスポンシブで機能的な評価システムコンポーネントで、ダッシュボードの統合に適しています。ダークモードのサポートが含まれています。

開ける

Skeuomorphic_Jewel_Tone_Rating_System_Simple

スキューモーフィックデザイン、ジュエルトーンの配色、ダークモードのサポートを備えたシンプルでレスポンシブな評価システムコンポーネントで、非営利/慈善団体のWebサイトに適しています。

開ける

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

ソーシャルメディア向けの複雑でレトロなテーマの評価システムコンポーネントで、単色の配色が特徴です。完全にレスポンシブで、ダークモードをサポートしています。このコンポーネントは、HTML と Tailwind CSS のみを使用し、JavaScript は使用しません。

開ける