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

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

eコマース向けのシンプルでレトロなスタイルの評価システムコンポーネントで、鮮やかな色とTailwind CSSを使用したダークテーマのサポートが特徴です。

プレビュー

HTMLコード 

<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800">
  <div class="flex space-x-1 text-2xl">
    <!-- Star 1 -->
    <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
      <path d="M12 .288l3.525 10.917L24 11.462l-8.475 5.068 3.119 9.142L12 20.05l-6.644 5.622 3.119-9.142L0 11.462l8.475-.257L12 .288z"/>
    </svg>
    <!-- Star 2 -->
    <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
      <path d="M12 .288l3.525 10.917L24 11.462l-8.475 5.068 3.119 9.142L12 20.05l-6.644 5.622 3.119-9.142L0 11.462l8.475-.257L12 .288z"/>
    </svg>
    <!-- Star 3 -->
    <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
      <path d="M12 .288l3.525 10.917L24 11.462l-8.475 5.068 3.119 9.142L12 20.05l-6.644 5.622 3.119-9.142L0 11.462l8.475-.257L12 .288z"/>
    </svg>
    <!-- Star 4 -->
    <svg class="w-8 h-8 text-yellow-400 dark:text-yellow-500" fill="currentColor" viewBox="0 0 24 24">
      <path d="M12 .288l3.525 10.917L24 11.462l-8.475 5.068 3.119 9.142L12 20.05l-6.644 5.622 3.119-9.142L0 11.462l8.475-.257L12 .288z"/>
    </svg>
    <!-- Star 5 (empty) -->
    <svg class="w-8 h-8 text-gray-400 dark:text-gray-600" fill="currentColor" viewBox="0 0 24 24">
      <path d="M12 .288l3.525 10.917L24 11.462l-8.475 5.068 3.119 9.142L12 20.05l-6.644 5.622 3.119-9.142L0 11.462l8.475-.257L12 .288z"/>
    </svg>
  </div>
</div>

関連コンポーネント

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

補完的な配色、適度な複雑さ、ブログ/コンテンツの消費に適したミニマリスト/フラットデザインの評価システムコンポーネント。レスポンシブデザインで、Tailwind CSSクラスを使用し、JavaScriptを使用しないダークテーマをサポートしています。

開ける

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

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

開ける

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

現実世界の対応物を模倣したスキューモーフィックなデザインでアイテムを評価するためのレスポンシブ Web コンポーネント。ポートフォリオ内の作品や製品を紹介するのに適しています。

開ける