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

Comments Section 구성 요소

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

미리 보기

HTML 코드 

<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>

관련 구성 요소

Industrial_Purple_Comments_Section

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

열다

Comments Section 구성 요소

Neumorphism 디자인, 트라이어딕 색 구성표 및 소셜 미디어에 대한 중간 수준의 복잡성을 가진 댓글 섹션 구성 요소로, 반응형 디자인 및 어두운 테마 지원과 함께 Tailwind CSS를 사용하여 구현되었습니다.

열다

Comments Section 구성 요소

예약/예약 시스템을 위해 설계된 복잡하고 반응이 빠른 댓글 섹션 구성 요소로, Bauhaus에서 영감을 받은 흑백 색상과 밝은 액센트 색상으로 설계되었습니다. 사용자 아바타, 별 등급, 타임스탬프 및 다크 모드 지원이 포함됩니다.

열다