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>
관련 구성 요소
Comments Section 구성 요소
Neumorphism 디자인, 트라이어딕 색 구성표 및 소셜 미디어에 대한 중간 수준의 복잡성을 가진 댓글 섹션 구성 요소로, 반응형 디자인 및 어두운 테마 지원과 함께 Tailwind CSS를 사용하여 구현되었습니다.
Brutalism_Rainbow_Medical_Comments_Section
헬스케어/의료 애플리케이션을 위한 복잡하고 브루탈리즘에서 영감을 받은 댓글 섹션 구성 요소로, 생생한 무지개 그라데이션 색 구성표와 다크 모드 지원으로 완전한 응답성을 제공합니다.
Comments Section 구성 요소
glassmorphism 디자인으로 스타일이 지정된 반응형 댓글 섹션 구성 요소로, 흐림 효과가 있는 젖빛 유리와 같은 반투명 요소와 Tailwind CSS를 사용하여 어두운 테마를 지원합니다.