코멘트 섹션

Comments Section 구성 요소

생생한 색상, 적당한 복잡성, 반응형 디자인 및 어두운 테마 지원을 갖춘 전자 상거래를 위한 미니멀리스트/플랫 디자인 주석 섹션 구성 요소입니다.

                <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-white mb-4">Customer Reviews</h2>

  <!-- Comment 1 -->
  <div class="mb-6 flex">
    <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
    <div>
      <div class="flex items-center mb-2">
        <p class="font-semibold text-blue-600 dark:text-blue-400">Sarah J.</p>
        <p class="text-gray-500 dark:text-gray-400 text-sm ml-4">2 days ago</p>
      </div>
      <div class="flex items-center mb-2">
        <span class="text-yellow-400">★★★★★</span>
      </div>
      <p class="text-gray-700 dark:text-gray-300 leading-relaxed">"Absolutely love this product! The quality is superb and it arrived so quickly. Highly recommend!"</p>
    </div>
  </div>

  <!-- Comment 2 -->
  <div class="mb-6 flex">
    <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
    <div>
      <div class="flex items-center mb-2">
        <p class="font-semibold text-blue-600 dark:text-blue-400">Mark T.</p>
        <p class="text-gray-500 dark:text-gray-400 text-sm ml-4">5 days ago</p>
      </div>
      <div class="flex items-center mb-2">
        <span class="text-yellow-400">★★★★☆</span>
      </div>
      <p class="text-gray-700 dark:text-gray-300 leading-relaxed">"Good product overall. It does what it says. Shipping was a bit slow, but worth the wait."</p>
    </div>
  </div>

  <!-- Comment Form (moderate complexity interactive feature) -->
  <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Leave a Review</h3>
    <form>
      <div class="mb-4">
        <label for="rating" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Your Rating</label>
        <select id="rating" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 dark:text-white dark:border-gray-600">
          <option>★★★★★ - Excellent</option>
          <option>★★★★☆ - Very Good</option>
          <option>★★★☆☆ - Good</option>
          <option>★★☆☆☆ - Fair</option>
          <option>★☆☆☆☆ - Poor</option>
        </select>
      </div>
      <div class="mb-4">
        <label for="comment" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Your Comment</label>
        <textarea id="comment" rows="4" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 dark:text-white dark:border-gray-600" placeholder="Share your thoughts..."></textarea>
      </div>
      <button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">
        Submit Review
      </button>
    </form>
  </div>
</div>

Comments Section 구성 요소

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

미리보기 열기

                <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 구성 요소

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

미리보기 열기

                <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 구성 요소

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

미리보기 열기

                <div
  class="container mx-auto p-4 dark:bg-gray-900 dark:text-white"
>
  <h2 class="text-2xl font-bold mb-4 dark:text-white">Comments</h2>

  <div class="mb-4">
    <textarea
      class="w-full p-2 border border-gray-300 rounded shadow-inner focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
      rows="4"
      placeholder="Add a comment..."
    ></textarea>
    <button
      class="mt-2 px-4 py-2 bg-blue-500 text-white rounded shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800"
    >
      Post Comment
    </button>
  </div>

  <div class="space-y-4">
    <div
      class="bg-white p-4 rounded shadow-lg dark:bg-gray-800 dark:text-white"
    >
      <div class="flex items-center mb-2">
        <img
          class="w-10 h-10 rounded-full mr-4 shadow-md"
          src="https://randomuser.me/api/portraits/men/32.jpg"
          alt="User Avatar"
        />
        <div>
          <h4 class="font-bold dark:text-white">John Doe</h4>
          <p class="text-gray-500 text-sm dark:text-gray-400">2 hours ago</p>
        </div>
      </div>
      <p class="dark:text-white">
        This is a great comment! It provides valuable insights.
      </p>
      <div class="flex items-center mt-4 space-x-4">
        <button
          class="flex items-center text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-500"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 mr-1"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M18 13v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-5a2 2 0 012-2h3.586l1.414 1.414a.996.996 0 001.414 0L10.414 11H14a2 2 0 012 2h2zM5 9.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"
              clip-rule="evenodd"
            ></path>
          </svg>
          Like
        </button>
        <button
          class="flex items-center text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-500"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 mr-1"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5z"
              clip-rule="evenodd"
            ></path>
          </svg>
          Reply
        </button>
      </div>
    </div>

    <div
      class="bg-white p-4 rounded shadow-lg dark:bg-gray-800 dark:text-white"
    >
      <div class="flex items-center mb-2">
        <img
          class="w-10 h-10 rounded-full mr-4 shadow-md"
          src="https://randomuser.me/api/portraits/women/44.jpg"
          alt="User Avatar"
        />
        <div>
          <h4 class="font-bold dark:text-white">Jane Smith</h4>
          <p class="text-gray-500 text-sm dark:text-gray-400">1 hour ago</p>
        </div>
      </div>
      <p class="dark:text-white">
        I agree with the previous comment. This is very helpful.
      </p>
      <div class="flex items-center mt-4 space-x-4">
        <button
          class="flex items-center text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-500"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 mr-1"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M18 13v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-5a2 2 0 012-2h3.586l1.414 1.414a.996.996 0 001.414 0L10.414 11H14a2 2 0 012 2h2zM5 9.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"
              clip-rule="evenodd"
            ></path>
          </svg>
          Like
        </button>
        <button
          class="flex items-center text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-500"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 mr-1"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5z"
              clip-rule="evenodd"
            ></path>
          </svg>
          Reply
        </button>
      </div>
    </div>
  </div>
</div>

Comments Section 구성 요소

비즈니스/기업 웹 사이트를 위해 설계된 반응형 댓글 섹션 구성 요소로, 매력적인 애니메이션, 생생한 색상 및 다크 모드 지원을 제공합니다.

미리보기 열기

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-shadow duration-300 hover:shadow-xl">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Comments</h2>
    <div class="space-y-4">
        <div class="flex items-start gap-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full"> 
            <div class="flex-1">
                <div class="bg-blue-100 dark:bg-blue-500 p-4 rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105">
                    <p class="text-gray-700 dark:text-gray-200">This is a fantastic article! I learned so much.</p>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400">- John Doe</span>
            </div>
        </div>
        <div class="flex items-start gap-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            <div class="flex-1">
                <div class="bg-green-100 dark:bg-green-500 p-4 rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105">
                    <p class="text-gray-700 dark:text-gray-200">Great insights! Looking forward to more posts.</p>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400">- Jane Smith</span>
            </div>
        </div>
        <div class="flex items-start gap-4">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            <div class="flex-1">
                <div class="bg-red-100 dark:bg-red-500 p-4 rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105">
                    <p class="text-gray-700 dark:text-gray-200">I completely agree with this perspective. Well said!</p>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400">- Tom Brown</span>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Leave a Comment:</h3>
        <textarea class="w-full p-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 resize-none" rows="4" placeholder="Type your message here..."></textarea>
        <button class="mt-4 w-full bg-blue-500 text-white font-semibold py-2 rounded-lg transition-colors duration-300 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500">Submit</button>
    </div>
</div>

코멘트 섹션 비즈니스/기업 목적을 위해 트라이어딕 색 구성표를 사용하는 Material Design이 있는 구성 요소. 어두운 테마를 지원하는 반응형 디자인.

미리보기 열기

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

    <!-- Comment 1 -->
    <div class="flex items-start space-x-4 mb-6">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
      <div class="flex-1">
        <div class="dark:bg-gray-700 bg-gray-100 rounded-lg p-3">
          <p class="font-semibold dark:text-white text-gray-800">John Doe</p>
          <p class="dark:text-gray-300 text-gray-700">This is a great article! Very insightful.</p>
        </div>
        <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
          <span>2 hours ago</span>
          <span class="ml-4 cursor-pointer hover:underline">Reply</span>
        </div>
      </div>
    </div>

    <!-- Comment 2 -->
    <div class="flex items-start space-x-4 mb-6">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
      <div class="flex-1">
        <div class="dark:bg-gray-700 bg-gray-100 rounded-lg p-3">
          <p class="font-semibold dark:text-white text-gray-800">Jane Smith</p>
          <p class="dark:text-gray-300 text-gray-700">I agree, the points are well-explained.</p>
        </div>
        <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
          <span>1 hour ago</span>
          <span class="ml-4 cursor-pointer hover:underline">Reply</span>
        </div>
      </div>
    </div>

    <!-- Add New Comment Area -->
    <div class="mt-6">
      <textarea class="w-full p-3 rounded-lg border dark:bg-gray-700 dark:border-gray-600 dark:text-white text-gray-800 dark:placeholder-gray-400 placeholder-gray-500 focus:outline-none focus:ring focus:border-blue-300" rows="4" placeholder="Add a comment..."></textarea>
      <button class="mt-3 px-6 py-2 dark:bg-blue-600 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-600 focus:outline-none focus:ring dark:focus:ring-blue-800 focus:ring-blue-300">Post Comment</button>
    </div>
  </div>
</div>