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

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

ダッシュボードアプリケーションに適したミニマリストでフラットなデザイン評価コンポーネントで、ジュエルトーンとダークモードサポートによる完全な応答性が特徴です。

プレビュー

HTMLコード

<div class="p-4 sm:p-6 md:p-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg max-w-sm mx-auto transition-colors duration-300">
  <h2 class="text-lg sm:text-xl font-semibold text-gray-800 dark:text-white mb-4 text-center sm:text-left">Overall Satisfaction</h2>
  <div class="flex items-center justify-center sm:justify-start mb-4">
    <div class="flex space-x-1">
      <!-- Active Stars -->
      <svg class="w-6 h-6 sm:w-7 sm:h-7 text-emerald-500 dark:text-emerald-400 fill-current" viewBox="0 0 24 24">
        <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.896 1.48-8.279L.001 9.306l8.332-1.151L12 .587z" />
      </svg>
      <svg class="w-6 h-6 sm:w-7 sm:h-7 text-emerald-500 dark:text-emerald-400 fill-current" viewBox="0 0 24 24">
        <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.896 1.48-8.279L.001 9.306l8.332-1.151L12 .587z" />
      </svg>
      <svg class="w-6 h-6 sm:w-7 sm:h-7 text-emerald-500 dark:text-emerald-400 fill-current" viewBox="0 0 24 24">
        <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.896 1.48-8.279L.001 9.306l8.332-1.151L12 .587z" />
      </svg>
      <svg class="w-6 h-6 sm:w-7 sm:h-7 text-emerald-500 dark:text-emerald-400 fill-current" viewBox="0 0 24 24">
        <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.896 1.48-8.279L.001 9.306l8.332-1.151L12 .587z" />
      </svg>
      <!-- Inactive Stars -->
      <svg class="w-6 h-6 sm:w-7 sm:h-7 text-gray-300 dark:text-gray-600 fill-current" viewBox="0 0 24 24">
        <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.896 1.48-8.279L.001 9.306l8.332-1.151L12 .587z" />
      </svg>
    </div>
    <span class="ml-3 text-lg sm:text-xl font-bold text-gray-800 dark:text-white">4.0</span>
  </div>
  <p class="text-sm sm:text-base text-gray-600 dark:text-gray-300 text-center sm:text-left">Based on 125 ratings</p>
</div>

関連コンポーネント

Neumorphic_Pastel_Rating_System_Component

パステルカラーの配色を採用したシンプルでレスポンシブなニューモルフィック評価システムコンポーネントで、ダークモードのサポートを含む旅行や観光のWebサイトに適しています。

開ける

Bauhaus_Music_Rating_System

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

開ける

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

セピア/ブラウンの色調、ダークモードのサポート、マイクロインタラクションに焦点を当てたスタイリングを備えたシンプルで応答性の高い評価システムコンポーネントで、政府/公共サービスのWebサイトに適しています。

開ける