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

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

ビジネスWebサイトに適したミニマリストのフラットデザイン評価システムコンポーネントで、レスポンシブレイアウトとダークテーマのサポートを備えています。

プレビュー

HTMLコード 

<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Rate Our Service</h2>
    <div class="flex items-center space-x-2 mb-4">
        <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="text-gray-700 dark:text-gray-300">John Doe</span>
    </div>
    <div class="flex">
        <span class="text-gray-600 dark:text-gray-400 mr-2">Rating:</span>
        <div class="flex items-center space-x-1">
            <svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
            <svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
            <svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
            <svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
            <svg class="w-6 h-6 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.121-6.528L0 6.091l6.637-.557L10 0l3.363 5.534L20 6.091l-5.243 5.471 1.121 6.528z"/></svg>
        </div>
    </div>
    <textarea class="w-full p-2 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-md focus:outline-none focus:ring focus:ring-yellow-300 dark:focus:ring-yellow-400" placeholder="Leave your feedback here..."></textarea>
    <button class="mt-4 px-4 py-2 bg-yellow-500 dark:bg-yellow-400 text-white rounded-md hover:bg-yellow-600 dark:hover:bg-yellow-500">Submit</button>
</div>

関連コンポーネント

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

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

開ける

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

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

開ける

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

レトロ/ビンテージスタイルでデザインされた評価システムコンポーネントで、補色の配色とブログコンテンツの複雑なインターフェースを利用しています。このコンポーネントはダークモードをサポートし、Tailwind CSSを使用して応答します。

開ける