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

Comments Section 구성 요소

Responsive Comments Section Skeuomorphism, Pastel color scheme, Simple complexity tailored for E-commerce를 사용한 컴포넌트. 어두운 테마가 지원됩니다.

미리 보기

HTML 코드 

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

  <!-- Comment 1 -->
  <div class="mb-4 bg-white dark:bg-gray-700 p-4 rounded-lg shadow-inner">
    <div class="flex items-center mb-2">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600">
      <div>
        <p class="font-semibold text-gray-800 dark:text-gray-200">John Doe</p>
        <p class="text-sm text-gray-500">2 days ago</p>
      </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300">This is a great product! Highly recommend.</p>
  </div>

  <!-- Comment 2 -->
  <div class="mb-4 bg-white dark:bg-gray-700 p-4 rounded-lg shadow-inner">
    <div class="flex items-center mb-2">
      <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-gray-300 dark:border-gray-600">
      <div>
        <p class="font-semibold text-gray-800 dark:text-gray-200">Jane Smith</p>
        <p class="text-sm text-gray-500">1 day ago</p>
      </div>
    </div>
    <p class="text-gray-700 dark:text-gray-300">Fast shipping and excellent quality.</p>
  </div>

  <!-- Add new comment form -->
  <div class="mt-6">
    <textarea class="w-full p-3 rounded-lg border-gray-300 dark:border-gray-600 border-2 focus:outline-none focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-gray-200" rows="3" placeholder="Add a comment..."></textarea>
    <button class="mt-3 px-6 py-2 bg-blue-500 text-white rounded-lg shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">Submit Comment</button>
  </div>

</div>

관련 구성 요소

Neon_Glow_Comments_Section

생생한 네온/글로우 미학을 가진 반응형 댓글 섹션 구성 요소로, 사용자 아바타, 타임스탬프 및 답장 버튼을 특징으로 합니다. 다크 모드를 지원하며 소셜 미디어 인터페이스용으로 설계되었습니다.

열다

Comments Section 구성 요소

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

열다

Neumorphic_Neon_Comments_Section

네온/일렉트릭 색 구성표가 있는 뉴모픽 댓글 섹션 구성 요소로, 엔터테인먼트/미디어 플랫폼용으로 설계되었습니다. 반응형 레이아웃, 다크 모드 지원 및 대화형 요소를 제공합니다. 각 댓글에는 아바타, 사용자 이름, 타임스탬프 및 댓글 텍스트가 표시되며 좋아요 및 답글 버튼이 있습니다.

열다