Comments Section

<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>