CCHub Logo CCHub Tailwind Collection
구성 요소 코멘트 섹션 Comments Section 구성 요소

Comments Section 구성 요소

glassmorphism 디자인으로 스타일이 지정된 반응형 댓글 섹션 구성 요소로, 흐림 효과가 있는 젖빛 유리와 같은 반투명 요소와 Tailwind CSS를 사용하여 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

<div class="bg-white bg-opacity-30 backdrop-blur-lg rounded-lg shadow-lg p-6 max-w-lg mx-auto mt-8 dark:bg-gray-800 dark:bg-opacity-30">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Comments</h2>
    <div class="mt-4">
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <div class="flex justify-between items-center">
                    <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">John Doe</h3>
                    <span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
                </div>
                <p class="mt-1 text-gray-600 dark:text-gray-300">This is an amazing post! Thanks for sharing!</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <div class="flex justify-between items-center">
                    <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Jane Smith</h3>
                    <span class="text-sm text-gray-500 dark:text-gray-400">4 hours ago</span>
                </div>
                <p class="mt-1 text-gray-600 dark:text-gray-300">I really enjoyed reading this. Great insights!</p>
            </div>
        </div>
        <div class="flex items-start mb-4">
            <img src="https://randomuser.me/api/portraits/men/3.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3">
            <div class="flex-1">
                <div class="flex justify-between items-center">
                    <h3 class="text-md font-medium text-gray-800 dark:text-gray-200">Michael Brown</h3>
                    <span class="text-sm text-gray-500 dark:text-gray-400">1 day ago</span>
                </div>
                <p class="mt-1 text-gray-600 dark:text-gray-300">Very well written! I appreciate the effort.</p>
            </div>
        </div>
    </div>
    <form class="mt-6">
        <textarea class="w-full p-2 border border-gray-300 rounded-lg dark:border-gray-700 dark:bg-gray-800 dark:text-white" rows="3" placeholder="Add a comment..."></textarea>
        <button type="submit" class="mt-2 bg-blue-500 hover:bg-blue-600 rounded-lg text-white py-2 px-4">Submit</button>
    </form>
</div>

관련 구성 요소

Comments Section 구성 요소

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

열다

Comments Section 구성 요소

댓글 섹션 마이크로 인터랙션이 있는 구성 요소, 파스텔 색 구성표, 대시보드의 중간 정도의 복잡성, 어두운 테마 지원으로 반응형, Tailwind CSS 사용. 이미지는 이미지의 경우 picsum.photos에서, 아바타의 경우 randomuser.me 의 이미지를 제공합니다. 자바스크립트가 없습니다.

열다

Comments Section 구성 요소

파스텔 색상의 브루탈리즘 스타일로 디자인된 댓글 섹션 구성 요소로, 전자 상거래 웹 사이트에 적합하며 사용자 아바타, 댓글 및 중간 수준의 상호 작용을 특징으로 합니다. 디자인은 다크 모드를 지원합니다.

열다