Comments Section Component

<div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-3xl mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden">
    <div class="p-4 sm:p-6 border-b border-gray-200 dark:border-gray-700">
      <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">Comments</h2>
    </div>
    
    <!-- New Comment Input -->
    <div class="p-4 sm:p-6">
      <div class="mb-4">
        <textarea class="w-full p-3 rounded-lg border border-gray-300 dark:border-gray-700 bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition duration-200 ease-in-out" rows="3" placeholder="Join the discussion..."></textarea>
      </div>
      <button class="px-5 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-md transition duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
        Post Comment
      </button>
    </div>

    <!-- Comments List -->
    <div class="divide-y divide-gray-200 dark:divide-gray-700">
      <!-- Comment 1 -->
      <div class="p-4 sm:p-6 flex space-x-4">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        </div>
        <div class="flex-1">
          <div class="flex items-center justify-between mb-1">
            <p class="font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mb-2">This is a great component! Simple, clean, and perfect for dark mode. Love the cool neutral palette.</p>
          <div class="flex space-x-4 text-sm text-gray-500 dark:text-gray-400">
            <a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400">Reply</a>
            <a href="#" class="hover:underline hover:text-red-500">Edit</a>
            <a href="#" class="hover:underline hover:text-red-500">Delete</a>
          </div>
        </div>
      </div>

      <!-- Comment 2 -->
      <div class="p-4 sm:p-6 flex space-x-4">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        </div>
        <div class="flex-1">
          <div class="flex items-center justify-between mb-1">
            <p class="font-semibold text-gray-900 dark:text-gray-100">Jane Smith</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">1 hour ago</p>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mb-2">Agreed! The responsiveness is also very well done. Keeps things clear on mobile.</p>
          <div class="flex space-x-4 text-sm text-gray-500 dark:text-gray-400">
            <a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400">Reply</a>
            <a href="#" class="hover:underline hover:text-red-500">Edit</a>
            <a href="#" class="hover:underline hover:text-red-500">Delete</a>
          </div>
        </div>
      </div>
      
      <!-- Comment 3 (Example with a longer text) -->
      <div class="p-4 sm:p-6 flex space-x-4">
        <div class="flex-shrink-0">
          <img class="h-10 w-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        </div>
        <div class="flex-1">
          <div class="flex items-center justify-between mb-1">
            <p class="font-semibold text-gray-900 dark:text-gray-100">Alex P.</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">30 minutes ago</p>
          </div>
          <p class="text-gray-700 dark:text-gray-300 mb-2">I appreciate the use of semantic HTML and the clean structure. It makes the code easy to read and understand, which is crucial for maintainability. Great job on the dark mode implementation too; it really reduces eye strain, especially during late-night browsing sessions. The cool neutral colors contribute to a very professional and calming aesthetic. This would fit perfectly into many modern web applications.</p>
          <div class="flex space-x-4 text-sm text-gray-500 dark:text-gray-400 ">
            <a href="#" class="hover:underline hover:text-blue-600 dark:hover:text-blue-400">Reply</a>
            <a href="#" class="hover:underline hover:text-red-500">Edit</a>
            <a href="#" class="hover:underline hover:text-red-500">Delete</a>
          </div>
        </div>
      </div>
    </div>
    
  </div>
</div>