CCHub Logo CCHub Tailwind Collection
コンポーネント 製品レビュー Product Reviews コンポーネント

Product Reviews コンポーネント

ソーシャルメディアインターフェース用に設計されたミニマリストの製品レビューコンポーネントで、トライアドの配色とインタラクティブな要素を統合しています。

プレビュー

HTMLコード 

<div class="bg-white dark:bg-gray-800 p-5 rounded-lg shadow-md max-w-md mx-auto">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Product Reviews</h2>
    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full">
        <div>
            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100">John Doe</h3>
            <span class="text-sm text-gray-600 dark:text-gray-300">1 hour ago</span>
        </div>
    </div>
    <div class="mb-4">
        <img src="https://picsum.photos/500/200" alt="Product Image" class="w-full h-32 object-cover rounded-md">
    </div>
    <p class="text-gray-800 dark:text-gray-200 mb-3">This product has exceeded my expectations! The quality is exceptional and it looks great in my living room.</p>
    <div class="flex items-center space-x-4 mb-4">
        <button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-1 px-2 rounded">Like</button>
        <button class="bg-green-500 hover:bg-green-600 text-white font-semibold py-1 px-2 rounded">Reply</button>
    </div>
    <div class="border-t border-gray-300 dark:border-gray-700 pt-4 mt-4">
        <h4 class="text-md font-semibold text-gray-700 dark:text-gray-300">Leave a Review</h4>
        <textarea class="w-full border border-gray-300 dark:border-gray-700 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-700" rows="4" placeholder="Write your thoughts..."></textarea>
        <button class="mt-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold py-1 px-2 rounded">Submit</button>
    </div>
</div>

関連コンポーネント

商品レビューコンポーネント - 遊び心のあるジュエルトーンと予約フォーカス

ブッキング/予約に焦点を当てた、複雑で遊び心のある商品レビューコンポーネント。ジュエルトーンの色、丸みを帯びた要素、ダークモードをサポートする完全な応答性を備えています。

開ける

Product Reviews コンポーネント

3Dデザインの美学、明るいアクセントの黒と白の配色を備えたシンプルで応答性の高い製品レビューコンポーネントで、ダークモードのサポートを含むCRM /ビジネスツール用に設計されています。

開ける

製品レビューコンポーネント(スキュアモーフィックパステル)

パステルカラーを使用し、ダークモードをサポートするSkeuomorphicデザインの美学でスタイリングされた、複雑で応答性の高い製品レビューコンポーネント。レイヤー化されたカード、微妙なグラデーション、影が特徴で、奥行きを演出します。アバター、名前、星評価、レビューテキスト、オプションの画像が含まれます。Tailwind CSSをJavaScriptなしで排他的に使用します。

開ける