Comments Section 구성 요소

스큐어모피즘(skeuomorphism)으로 디자인된 댓글 섹션은 흙색과 어두운 테마 지원을 특징으로 하며 전자 상거래 웹사이트에 맞게 조정되었습니다.

미리 보기

HTML 코드

<div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Customer Comments</h2>
    <div class="space-y-4">
        <div class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-brown-500" />
            <div class="ml-3">
                <p class="text-brown-800 dark:text-brown-200 font-medium">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">This product exceeded my expectations! Highly recommend.</p>
                <div class="mt-2">
                    <span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
                </div>
            </div>
        </div>
        <div class="flex items-start">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-brown-500" />
            <div class="ml-3">
                <p class="text-brown-800 dark:text-brown-200 font-medium">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">The quality is fantastic! Will buy again.</p>
                <div class="mt-2">
                    <span class="text-sm text-gray-500 dark:text-gray-400">1 day ago</span>
                </div>
            </div>
        </div>
        <div class="flex items-start">
            <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-brown-500" />
            <div class="ml-3">
                <p class="text-brown-800 dark:text-brown-200 font-medium">Mike Johnson</p>
                <p class="text-gray-600 dark:text-gray-400">Fast shipping and great customer service!</p>
                <div class="mt-2">
                    <span class="text-sm text-gray-500 dark:text-gray-400">3 days ago</span>
                </div>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Leave a Comment:</h3>
        <textarea class="w-full p-2 border rounded-lg bg-gray-100 dark:bg-gray-700 border-brown-300 dark:border-brown-600 focus:outline-none focus:ring focus:ring-brown-500 dark:focus:ring-brown-400" rows="4" placeholder="Write your thoughts..."></textarea>
        <button class="mt-2 px-4 py-2 bg-brown-600 text-white rounded-lg hover:bg-brown-500 focus:outline-none focus:ring focus:ring-brown-500 dark:bg-brown-500 dark:hover:bg-brown-400 dark:focus:ring-brown-400">Submit</button>
    </div>
</div>

Comments Section 구성 요소

미리 보기

HTML 코드

관련 구성 요소

Comments Section 구성 요소

사이버펑크 가을 코멘트 섹션

Comments Section 구성 요소