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>
관련 구성 요소
코멘트섹션
반응형, 어두운 테마와 호환되는 댓글 섹션 구성 요소는 미니멀리스트/플랫 디자인, 트라이어딕 색 구성표 및 복잡한 상호 작용 요소를 갖춘 전자 상거래를 위한 것으로, Tailwind CSS로 제작되었습니다. 데모 이미지에는 picsum.photos 및 randomuser.me 를 사용합니다.
Comments Section 구성 요소
단색 색 구성표를 사용하여 Material Design 스타일로 디자인된 간단한 댓글 섹션 구성 요소로, 소셜 미디어 인터페이스 및 어두운 테마를 지원하는 반응형 디자인에 최적화되어 있습니다.