Comments Section Component

<div
  class="container mx-auto p-4 dark:bg-gray-900 dark:text-white"
>
  <h2 class="text-2xl font-bold mb-4 dark:text-white">Comments</h2>

  <div class="mb-4">
    <textarea
      class="w-full p-2 border border-gray-300 rounded shadow-inner focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
      rows="4"
      placeholder="Add a comment..."
    ></textarea>
    <button
      class="mt-2 px-4 py-2 bg-blue-500 text-white rounded shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800"
    >
      Post Comment
    </button>
  </div>

  <div class="space-y-4">
    <div
      class="bg-white p-4 rounded shadow-lg dark:bg-gray-800 dark:text-white"
    >
      <div class="flex items-center mb-2">
        <img
          class="w-10 h-10 rounded-full mr-4 shadow-md"
          src="https://randomuser.me/api/portraits/men/32.jpg"
          alt="User Avatar"
        />
        <div>
          <h4 class="font-bold dark:text-white">John Doe</h4>
          <p class="text-gray-500 text-sm dark:text-gray-400">2 hours ago</p>
        </div>
      </div>
      <p class="dark:text-white">
        This is a great comment! It provides valuable insights.
      </p>
      <div class="flex items-center mt-4 space-x-4">
        <button
          class="flex items-center text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-500"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 mr-1"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M18 13v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-5a2 2 0 012-2h3.586l1.414 1.414a.996.996 0 001.414 0L10.414 11H14a2 2 0 012 2h2zM5 9.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"
              clip-rule="evenodd"
            ></path>
          </svg>
          Like
        </button>
        <button
          class="flex items-center text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-500"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 mr-1"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5z"
              clip-rule="evenodd"
            ></path>
          </svg>
          Reply
        </button>
      </div>
    </div>

    <div
      class="bg-white p-4 rounded shadow-lg dark:bg-gray-800 dark:text-white"
    >
      <div class="flex items-center mb-2">
        <img
          class="w-10 h-10 rounded-full mr-4 shadow-md"
          src="https://randomuser.me/api/portraits/women/44.jpg"
          alt="User Avatar"
        />
        <div>
          <h4 class="font-bold dark:text-white">Jane Smith</h4>
          <p class="text-gray-500 text-sm dark:text-gray-400">1 hour ago</p>
        </div>
      </div>
      <p class="dark:text-white">
        I agree with the previous comment. This is very helpful.
      </p>
      <div class="flex items-center mt-4 space-x-4">
        <button
          class="flex items-center text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-500"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 mr-1"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M18 13v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-5a2 2 0 012-2h3.586l1.414 1.414a.996.996 0 001.414 0L10.414 11H14a2 2 0 012 2h2zM5 9.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"
              clip-rule="evenodd"
            ></path>
          </svg>
          Like
        </button>
        <button
          class="flex items-center text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-500"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 mr-1"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5z"
              clip-rule="evenodd"
            ></path>
          </svg>
          Reply
        </button>
      </div>
    </div>
  </div>
</div>