Comment Area with Replies using Tailwind UI Component

<div class="mx-auto mt-20 max-w-3xl">
  <div class="rounded-md border p-4 bg-white">
    <div class="flex items-center space-x-4">
      <img class="h-10 w-10 rounded-full" src="https://via.placeholder.com/150" alt="Avatar" />
      <div>
        <h2 class="text-lg font-semibold">John Doe</h2>
        <p class="text-sm text-gray-500">2 hours ago</p>
      </div>
    </div>
    <p class="mt-4 text-gray-800">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor suscipit nisi, eu
      malesuada augue consectetur eget. Nam molestie convallis nunc at hendrerit. Aliquam ut sapien sit amet massa
      vehicula ultrices. In bibendum lacinia purus ut elementum.</p>
    <div class="mt-4 flex items-center space-x-2">
      <button class="group text-gray-500 hover:text-gray-800">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
          class="h-5 w-5 group-hover:fill-red-600">
          <path stroke-linecap="round" stroke-linejoin="round"
            d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" />
        </svg>
        <span>Like</span>
      </button>
      <button class="text-gray-500 hover:text-gray-800">
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
        </svg>
        <span>Reply</span>
      </button>
    </div>
  </div>

  <div class="my-4 ml-10 rounded-md border p-4 bg-white">
    <div class="flex items-center space-x-4">
      <img class="h-8 w-8 rounded-full" src="https://via.placeholder.com/150" alt="Avatar" />
      <div>
        <h3 class="text-md font-medium">Jane Doe</h3>
        <p class="text-sm text-gray-500">30 minutes ago</p>
      </div>
    </div>
    <p class="mt-2 text-gray-800">Vivamus rutrum sem ut ipsum aliquam, eget posuere odio pulvinar. Sed in eleifend odio,
      a congue nisl. Nam ac metus posuere, maximus metus et, tincidunt risus.</p>
  </div>

  <div class="my-4 ml-10 rounded-md border p-4 bg-white">
    <div class="flex items-center space-x-4">
      <img class="h-8 w-8 rounded-full" src="https://via.placeholder.com/150" alt="Avatar" />
      <div>
        <h3 class="text-md font-medium">Jane Doe</h3>
        <p class="text-sm text-gray-500">30 minutes ago</p>
      </div>
    </div>
    <p class="mt-2 text-gray-800">Vivamus rutrum sem ut ipsum aliquam, eget posuere odio pulvinar. Sed in eleifend odio,
      a congue nisl. Nam ac metus posuere, maximus metus et, tincidunt risus.</p>
  </div>
</div>