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

Comments Section 구성 요소

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

미리 보기

HTML 코드 

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

    <!-- New Comment Input -->
    <div class="flex items-start mb-6">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
      <div class="flex-grow">
        <textarea class="w-full p-3 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400" rows="3" placeholder="Add a comment..."></textarea>
        <button class="mt-2 px-4 py-2 bg-blue-200 text-blue-800 rounded-md hover:bg-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-blue-700 dark:text-white dark:hover:bg-blue-800">Post Comment</button>
      </div>
    </div>

    <!-- Existing Comments -->
    <div class="space-y-6">
      <!-- Comment 1 -->
      <div class="flex items-start">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="flex-grow bg-gray-100 dark:bg-gray-700 rounded-md p-4">
          <div class="flex justify-between items-center mb-2">
            <span class="font-semibold text-gray-800 dark:text-white">John Doe</span>
            <span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
          </div>
          <p class="text-gray-700 dark:text-gray-300">This is a very insightful comment. I really appreciate the details provided.</p>
          <div class="flex items-center mt-3">
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200 ease-in-out">
              <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.789 2.894l-3.5 7A2 2 0 0115.263 21H5v-7h3m4 0hക്കായി-3m0 0l-1.59-1.59a2 2 0 010-2.82l1.59-1.59v6z"></path></svg>
              <span class="text-sm">Like (5)</span>
            </button>
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-green-500 dark:hover:text-green-400 ml-4 transition duration-200 ease-in-out">
              <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.96 9.96 0 01-5.012-1.39l-3 3v-3.032A8.96 8.96 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
              <span class="text-sm">Reply</span>
            </button>
          </div>
        </div>
      </div>

      <!-- Comment 2 -->
      <div class="flex items-start">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
        <div class="flex-grow bg-gray-100 dark:bg-gray-700 rounded-md p-4">
          <div class="flex justify-between items-center mb-2">
            <span class="font-semibold text-gray-800 dark:text-white">Jane Smith</span>
            <span class="text-sm text-gray-500 dark:text-gray-400">Yesterday</span>
          </div>
          <p class="text-gray-700 dark:text-gray-300">Thanks for the great post! Very helpful.</p>
          <div class="flex items-center mt-3">
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200 ease-in-out">
              <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.789 2.894l-3.5 7A2 2 0 0115.263 21H5v-7h3m4 0hത്തിനായി-3m0 0l-1.59-1.59a2 2 0 010-2.82l1.59-1.59v6z"></path></svg>
              <span class="text-sm">Like (12)</span>
            </button>
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-green-500 dark:hover:text-green-400 ml-4 transition duration-200 ease-in-out">
              <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.96 9.96 0 01-5.012-1.39l-3 3v-3.032A8.96 8.96 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
              <span class="text-sm">Reply</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

Comments Section 구성 요소

코드에서 영감을 받은 깔끔한 코멘트 섹션 컴포넌트로, 모노스페이스 폰트와 파스텔 색상으로 엔터테인먼트/미디어 플랫폼을 위해 설계되었습니다. 반응성 및 다크 모드 지원이 특징입니다.

열다

Industrial_Purple_Comments_Section

산업 디자인 미학과 자주색/보라색 색 구성표가 있는 복잡하고 반응이 빠른 댓글 섹션 구성 요소로, 블로그 또는 콘텐츠 소비에 적합합니다. 노출된 요소, 원자재 느낌 및 다크 모드 지원이 특징입니다.

열다

Comments Section 구성 요소

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

열다