Comments Section Component

<div class="container mx-auto p-4">
  <!-- Comments Section -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Comments</h2>

    <!-- New Comment Input -->
    <div class="flex items-start mb-6">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
      <div class="flex-grow">
        <textarea class="w-full p-3 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400" rows="3" placeholder="Add a comment..."></textarea>
        <button class="mt-2 px-4 py-2 bg-blue-200 text-blue-800 rounded-md hover:bg-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-blue-700 dark:text-white dark:hover:bg-blue-800">Post Comment</button>
      </div>
    </div>

    <!-- Existing Comments -->
    <div class="space-y-6">
      <!-- Comment 1 -->
      <div class="flex items-start">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="flex-grow bg-gray-100 dark:bg-gray-700 rounded-md p-4">
          <div class="flex justify-between items-center mb-2">
            <span class="font-semibold text-gray-800 dark:text-white">John Doe</span>
            <span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
          </div>
          <p class="text-gray-700 dark:text-gray-300">This is a very insightful comment. I really appreciate the details provided.</p>
          <div class="flex items-center mt-3">
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200 ease-in-out">
              <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21H5v-7h3m4 0hക്കായി-3m0 0l-1.59-1.59a2 2 0 010-2.82l1.59-1.59v6z"></path></svg>
              <span class="text-sm">Like (5)</span>
            </button>
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-green-500 dark:hover:text-green-400 ml-4 transition duration-200 ease-in-out">
              <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.96 9.96 0 01-5.012-1.39l-3 3v-3.032A8.96 8.96 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
              <span class="text-sm">Reply</span>
            </button>
          </div>
        </div>
      </div>

      <!-- Comment 2 -->
      <div class="flex items-start">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
        <div class="flex-grow bg-gray-100 dark:bg-gray-700 rounded-md p-4">
          <div class="flex justify-between items-center mb-2">
            <span class="font-semibold text-gray-800 dark:text-white">Jane Smith</span>
            <span class="text-sm text-gray-500 dark:text-gray-400">Yesterday</span>
          </div>
          <p class="text-gray-700 dark:text-gray-300">Thanks for the great post! Very helpful.</p>
          <div class="flex items-center mt-3">
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200 ease-in-out">
              <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21H5v-7h3m4 0hത്തിനായി-3m0 0l-1.59-1.59a2 2 0 010-2.82l1.59-1.59v6z"></path></svg>
              <span class="text-sm">Like (12)</span>
            </button>
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-green-500 dark:hover:text-green-400 ml-4 transition duration-200 ease-in-out">
              <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.96 9.96 0 01-5.012-1.39l-3 3v-3.032A8.96 8.96 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
              <span class="text-sm">Reply</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>