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

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

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

プレビュー

HTMLコード 

<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
    <div class="p-6">
        <div class="flex items-center">
            <img class="w-10 h-10 rounded-full shadow-md border-2 border-white" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
            <div class="ml-4">
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
                <p class="text-sm text-gray-600 dark:text-gray-400">5 minutes ago</p>
            </div>
        </div>
        <div class="flex mt-4 space-x-1">
            <svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
            <svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
            <svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
            <svg class="w-6 h-6 text-yellow-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
            <svg class="w-6 h-6 text-gray-300" fill="currentColor" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21 16.54 14.97 22 10.91 15.82 10.36 12 4 8.18 10.36 2 10.91 7.46 14.97 5.82 21z" /></svg>
        </div>
        <div class="mt-4">
            <p class="text-gray-700 dark:text-gray-300">This is a quick comment about the rating. Engaging and insightful feedback to enhance the user experience.</p>
        </div>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 p-4">
        <h3 class="text-md font-semibold text-gray-800 dark:text-white">Related Image</h3>
        <img class="mt-2 rounded-lg shadow-md" src="https://picsum.photos/400/200" alt="Placeholder Image" />
    </div>
</div>

関連コンポーネント

Monospace_Developer_Rating_System_Component

ソーシャルメディアインターフェース用のクリーンでコードにインスパイアされた評価システムコンポーネントで、等幅フォント、端末の美学、補色が特徴です。ダークモードのサポートにより、完全にレスポンシブです。

開ける

Neumorphic Vibrant Rating System コンポーネント

Neumorphicスタイルと鮮やかな配色で設計された複雑でインタラクティブな評価システムコンポーネントで、フォーラムやコミュニティプラットフォームに適しています。星評価、アップ/ダウン投票、数値表示が含まれ、完全な応答性とダークモードがサポートされています。

開ける

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

天気/気候データ用に設計された、キャンディー/スウィートカラースキームのクリーンでミニマリストな評価システムコンポーネント。グリッドシステムを使用し、タイポグラフィを強調し、完全な応答性とダークモードをサポートしています。

開ける