Comments Section 구성 요소
레트로/빈티지 미학과 흙색으로 디자인된 간단한 댓글 섹션 구성 요소입니다. 80년대와 90년대를 연상시키는 향수를 불러일으키는 디자인이 특징이며, 소셜 미디어 인터페이스에 맞게 조정되었으며 다크 모드를 지원합니다.
HTML 코드
<div class="bg-gray-50 dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-brown-800 dark:text-brown-200 mb-4">Comments</h2>
<div class="flex mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-12 h-12 mr-4">
<div class="flex-1">
<input type="text" placeholder="Write a comment..." class="w-full bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 p-2 rounded-lg shadow border border-gray-300 dark:border-gray-600 placeholder-gray-600 dark:placeholder-gray-400 focus:ring focus:ring-brown-300 dark:focus:ring-brown-500"/>
</div>
</div>
<div class="border-t border-gray-300 dark:border-gray-600 pt-4">
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-3">
<div class="bg-gray-100 dark:bg-gray-700 p-2 rounded-lg shadow">
<p class="text-brown-800 dark:text-brown-200"><strong>Alice</strong> <span class="text-gray-600 dark:text-gray-400">- 2 hours ago</span></p>
<p class="text-gray-800 dark:text-gray-300">Love this post! It really brings back memories.</p>
</div>
</div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/3.jpg" alt="User Avatar" class="rounded-full w-10 h-10 mr-3">
<div class="bg-gray-100 dark:bg-gray-700 p-2 rounded-lg shadow">
<p class="text-brown-800 dark:text-brown-200"><strong>Bob</strong> <span class="text-gray-600 dark:text-gray-400">- 4 hours ago</span></p>
<p class="text-gray-800 dark:text-gray-300">The vintage vibe is amazing!</p>
</div>
</div>
</div>
</div>관련 구성 요소
코멘트섹션
반응형, 어두운 테마와 호환되는 댓글 섹션 구성 요소는 미니멀리스트/플랫 디자인, 트라이어딕 색 구성표 및 복잡한 상호 작용 요소를 갖춘 전자 상거래를 위한 것으로, Tailwind CSS로 제작되었습니다. 데모 이미지에는 picsum.photos 및 randomuser.me 를 사용합니다.
Comments Section 구성 요소
생생한 색상, 적당한 복잡성, 반응형 디자인 및 어두운 테마 지원을 갖춘 전자 상거래를 위한 미니멀리스트/플랫 디자인 주석 섹션 구성 요소입니다.