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

Comments Section 구성 요소

Comments section 구성 요소에는 단색 색 구성표, microinteractions, 어두운 테마가 지원되는 반응형 디자인이 있습니다.

미리 보기

HTML 코드 

<div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Comments</h2>

  <!-- Comment 1 -->
  <div class="mb-4 flex items-start space-x-3">
    <img class="w-10 h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
    <div class="flex-1">
      <div class="flex items-center justify-between">
        <p class="font-semibold text-gray-900 dark:text-gray-100">Babe Wani</p>
        <p class="text-xs text-gray-500 dark:text-gray-400">2 days ago</p>
      </div>
      <p class="text-gray-700 dark:text-gray-300 mt-1">This dashboard is incredibly insightful! The data visualization makes complex information easy to digest.</p>
      <div class="flex items-center mt-2 text-gray-500 dark:text-gray-400 text-sm">
        <button class="flex items-center mr-4 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.857 2.153l-2.54 9.147a1 1 0 01-1.702.585L11 16m6 0H4a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v8z"></path></svg>
          <span>Like (12)</span>
        </button>
        <button class="flex items-center hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
          <span>Reply</span>
        </button>
      </div>
    </div>
  </div>

  <!-- Comment 2 -->
  <div class="mb-4 flex items-start space-x-3">
    <img class="w-10 h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/44.jpg" alt="User Avatar">
    <div class="flex-1">
      <div class="flex items-center justify-between">
        <p class="font-semibold text-gray-900 dark:text-gray-100">George Costanza</p>
        <p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
      </div>
      <p class="text-gray-700 dark:text-gray-300 mt-1">I appreciate the clear layout and the interactive elements. Makes monitoring key metrics a breeze.</p>
      <div class="flex items-center mt-2 text-gray-500 dark:text-gray-400 text-sm">
        <button class="flex items-center mr-4 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.857 2.153l-2.54 9.147a1 1 0 01-1.702.585L11 16m6 0H4a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v8z"></path></svg>
          <span>Like (8)</span>
        </button>
        <button class="flex items-center hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
          <span>Reply</span>
        </button>
      </div>
    </div>
  </div>

  <!-- Reply to Comment 2 -->
  <div class="mb-4 flex items-start space-x-3 ml-14">
    <img class="w-8 h-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/72.jpg" alt="User Avatar">
    <div class="flex-1">
      <div class="flex items-center justify-between">
        <p class="font-semibold text-gray-900 dark:text-gray-100">Elaine Benes</p>
        <p class="text-xs text-gray-500 dark:text-gray-400">20 hours ago</p>
      </div>
      <p class="text-gray-700 dark:text-gray-300 mt-1">@George Costanza I totally agree! The responsiveness is also a huge plus.</p>
      <div class="flex items-center mt-2 text-gray-500 dark:text-gray-400 text-sm">
        <button class="flex items-center mr-4 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.857 2.153l-2.54 9.147a1 1 0 01-1.702.585L11 16m6 0H4a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v8z"></path></svg>
          <span>Like (5)</span>
        </button>
        <button class="flex items-center hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
          <span>Reply</span>
        </button>
      </div>
    </div>
  </div>

  <!-- Comment 3 (New Comment) -->
  <div class="flex items-start space-x-3">
    <img class="w-10 h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
    <div class="flex-1">
      <textarea class="w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all duration-200 resize-y" rows="3" placeholder="Add a comment..."></textarea>
      <div class="flex justify-end mt-2">
        <button class="px-5 py-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold rounded-lg shadow-md transition-colors duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
          Post Comment
        </button>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

Comments Section 구성 요소

레트로/빈티지 미학과 흙색으로 디자인된 간단한 댓글 섹션 구성 요소입니다. 80년대와 90년대를 연상시키는 향수를 불러일으키는 디자인이 특징이며, 소셜 미디어 인터페이스에 맞게 조정되었으며 다크 모드를 지원합니다.

열다

Comments Section 구성 요소

스큐어모피즘 디자인, 트라이어딕 색 구성표, 복잡한 상호 작용, 소셜 미디어 목적, 반응형 및 어두운 테마 지원이 포함된 댓글 섹션용 구성 요소입니다.

열다

코멘트섹션

반응형, 어두운 테마와 호환되는 댓글 섹션 구성 요소는 미니멀리스트/플랫 디자인, 트라이어딕 색 구성표 및 복잡한 상호 작용 요소를 갖춘 전자 상거래를 위한 것으로, Tailwind CSS로 제작되었습니다. 데모 이미지에는 picsum.photos 및 randomuser.me 를 사용합니다.

열다