Comments Section Component

<section class="font-sans antialiased bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 py-6 sm:py-8 lg:py-12">
  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-2xl sm:text-3xl font-light tracking-tight mb-6 sm:mb-8 text-gray-700 dark:text-gray-100">
      Comments
    </h2>

    <div class="bg-white rounded-md p-4 sm:p-6 shadow-sm dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
      <!-- Comment Input/Add Section -->
      <div class="mb-6">
        <form>
          <textarea class="w-full p-3 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-stone-500 focus:border-stone-500 bg-gray-50 text-gray-800 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-300" rows="3" placeholder="Add a comment..."></textarea>
          <div class="flex justify-end mt-3">
            <button type="submit" class="px-4 py-2 text-sm font-medium rounded-md bg-zinc-600 text-white hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-600 dark:focus:ring-zinc-400">
              Post Comment
            </button>
          </div>
        </form>
      </div>

      <!-- Existing Comments Section -->
      <div class="space-y-4 sm:space-y-5">
        <!-- Comment 1 -->
        <div class="flex items-start">
          <img class="w-9 h-9 sm:w-10 sm:h-10 rounded-full mr-3 sm:mr-4 object-cover border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar of Sarah"> 
          <div>
            <p class="text-sm font-medium text-gray-700 dark:text-gray-200">Sarah J.</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">2 days ago</p>
            <p class="text-sm text-gray-800 dark:text-gray-200 leading-relaxed">
              This documentation is very clear and concise. Thanks for the effort!
            </p>
          </div>
        </div>

        <!-- Comment 2 -->
        <div class="flex items-start">
          <img class="w-9 h-9 sm:w-10 sm:h-10 rounded-full mr-3 sm:mr-4 object-cover border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of John"> 
          <div>
            <p class="text-sm font-medium text-gray-700 dark:text-gray-200">John D.</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">1 day ago</p>
            <p class="text-sm text-gray-800 dark:text-gray-200 leading-relaxed">
              I found a small typo on line 42, but overall, excellent work!
            </p>
          </div>
        </div>

        <!-- Comment 3 (Newer) -->
        <div class="flex items-start">
          <img class="w-9 h-9 sm:w-10 sm:h-10 rounded-full mr-3 sm:mr-4 object-cover border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar of Emily"> 
          <div>
            <p class="text-sm font-medium text-gray-700 dark:text-gray-200">Emily R.</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">5 hours ago</p>
            <p class="text-sm text-gray-800 dark:text-gray-200 leading-relaxed">
              Could you add an example for the `parse()` function? That would be very helpful.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>