HTML 代码
<div class="container mx-auto p-4">
<div class="dark:bg-gray-800 bg-white rounded-lg shadow-md p-6 mb-4">
<h2 class="text-2xl font-bold dark:text-white text-gray-800 mb-4">Comments</h2>
<!-- Comment 1 -->
<div class="flex items-start space-x-4 mb-6">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="flex-1">
<div class="dark:bg-gray-700 bg-gray-100 rounded-lg p-3">
<p class="font-semibold dark:text-white text-gray-800">John Doe</p>
<p class="dark:text-gray-300 text-gray-700">This is a great article! Very insightful.</p>
</div>
<div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
<span>2 hours ago</span>
<span class="ml-4 cursor-pointer hover:underline">Reply</span>
</div>
</div>
</div>
<!-- Comment 2 -->
<div class="flex items-start space-x-4 mb-6">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
<div class="flex-1">
<div class="dark:bg-gray-700 bg-gray-100 rounded-lg p-3">
<p class="font-semibold dark:text-white text-gray-800">Jane Smith</p>
<p class="dark:text-gray-300 text-gray-700">I agree, the points are well-explained.</p>
</div>
<div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
<span>1 hour ago</span>
<span class="ml-4 cursor-pointer hover:underline">Reply</span>
</div>
</div>
</div>
<!-- Add New Comment Area -->
<div class="mt-6">
<textarea class="w-full p-3 rounded-lg border dark:bg-gray-700 dark:border-gray-600 dark:text-white text-gray-800 dark:placeholder-gray-400 placeholder-gray-500 focus:outline-none focus:ring focus:border-blue-300" rows="4" placeholder="Add a comment..."></textarea>
<button class="mt-3 px-6 py-2 dark:bg-blue-600 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-600 focus:outline-none focus:ring dark:focus:ring-blue-800 focus:ring-blue-300">Post Comment</button>
</div>
</div>
</div>