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>

関連コンポーネント

Monospace_Developer_Autumn_Rating_System_Component

複雑で等幅にインスパイアされた評価システムコンポーネントで、産業および製造アプリケーション向けの秋の色が特徴です。すっきりとしたデザイン、複数のインタラクティブ要素、完全な応答性、ダークモードのサポートが特徴です。

開ける

Brutalism_Travel_Rating_System

旅行および観光 Web サイト向けのシンプルなブルータリズム スタイルの評価システム コンポーネントで、クールなニュートラルとダーク モードのサポートが特徴です。

開ける

Skeuomorphic_Jewel_Tone_Rating_System_Simple

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

開ける