CCHub Logo CCHub Tailwind Collection
コンポーネント コメントセクション コメントセクションコンポーネント

コメントセクションコンポーネント

ダークモードUIとトライアドカラースキームを備えたeコマースプラットフォーム向けに設計されたレスポンシブコメントセクション。

プレビュー

HTMLコード 

<div class="bg-gray-900 text-white p-6 rounded-lg shadow-lg">
    <h2 class="text-xl font-bold mb-4">Customer Reviews</h2>
    <div class="space-y-4">
        <div class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
            <div class="flex-1">
                <div class="bg-gray-800 p-4 rounded-lg shadow-md">
                    <h3 class="font-semibold">John Doe</h3>
                    <p class="text-gray-300">This product is fantastic! It has exceeded my expectations.</p>
                    <div class="mt-2 flex items-center">
                        <span class="text-yellow-400">★★★★☆</span>
                        <span class="ml-2 text-sm text-gray-500">2 days ago</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex items-start">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
            <div class="flex-1">
                <div class="bg-gray-800 p-4 rounded-lg shadow-md">
                    <h3 class="font-semibold">Jane Smith</h3>
                    <p class="text-gray-300">Great quality! I loved the design and it fits perfectly.</p>
                    <div class="mt-2 flex items-center">
                        <span class="text-yellow-400">★★★★★</span>
                        <span class="ml-2 text-sm text-gray-500">1 week ago</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full mr-3">
            <div class="flex-1">
                <div class="bg-gray-800 p-4 rounded-lg shadow-md">
                    <h3 class="font-semibold">Michael Johnson</h3>
                    <p class="text-gray-300">Not what I expected, but still a decent product.</p>
                    <div class="mt-2 flex items-center">
                        <span class="text-yellow-400">★★★☆☆</span>
                        <span class="ml-2 text-sm text-gray-500">2 weeks ago</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-6 p-4 bg-gray-800 rounded-lg">
        <h3 class="text-lg font-semibold">Leave a Comment</h3>
        <form>
            <textarea class="w-full p-2 mb-2 bg-gray-700 text-white rounded-lg" rows="3" placeholder="Write your review..."></textarea>
            <div class="flex justify-between items-center">
                <div class="flex items-center">
                    <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-2">
                    <span class="text-white">User123</span>
                </div>
                <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-500 focus:outline-none">Submit</button>
            </div>
        </form>
    </div>
</div>

関連コンポーネント

コメントセクションコンポーネント

コメントセクション マイクロインタラクション、パステルカラースキーム、ダッシュボードの適度な複雑さ、ダークテーマサポートによるレスポンシブ、Tailwind CSSを使用したコンポーネント。画像は picsum.photos から、アバターの randomuser.me 画像は picsum.photos から。JavaScript はありません。

開ける

コメントセクション

レスポンシブでダークテーマと互換性のあるコメントセクションコンポーネントで、ミニマリスト/フラットなデザイン、トライアドの配色、複雑なインタラクション要素を備えたeコマース向けで、Tailwind CSSで構築されています。デモ画像には picsum.photos と randomuser.me を使用します。

開ける

Industrial_Purple_Comments_Section

工業デザインの美学と紫/紫の配色を備えた複雑で応答性の高いコメントセクションコンポーネントで、ブログやコンテンツの消費に適しています。露出した要素、原材料の感触、ダークモードのサポートが特徴です。

開ける