Componente Sezione Commenti

<section class="p-4 sm:p-6 md:p-8 lg:p-10 bg-gradient-to-br from-pink-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 font-sans">
  <div class="max-w-4xl mx-auto rounded-lg shadow-xl overflow-hidden bg-white dark:bg-gray-850">
    <header class="px-5 py-4 border-b border-pink-100 dark:border-gray-700 bg-pink-50 dark:bg-gray-800">
      <h2 class="text-2xl font-bold text-gray-800 dark:text-white flex items-center">
        Comments
        <span class="ml-2 text-sm bg-pink-200 dark:bg-gray-700 text-pink-700 dark:text-gray-300 px-3 py-1 rounded-full">4</span>
      </h2>
    </header>

    <div class="p-5 sm:p-6">
      <!-- Comment Input Area -->
      <div class="mb-6">
        <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200 mb-3">Leave a comment</h3>
        <div class="flex items-start space-x-4 mb-4">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-pink-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Your avatar">
          <textarea class="flex-1 p-3 border border-pink-200 dark:border-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-300 dark:focus:ring-pink-500 bg-pink-50 dark:bg-gray-750 text-gray-800 dark:text-gray-100 placeholder-pink-400 dark:placeholder-gray-400 resize-y min-h-[60px] max-h-[150px]" placeholder="Type your comment here..."></textarea>
        </div>
        <div class="flex justify-end">
          <button class="px-5 py-2 bg-pink-500 hover:bg-pink-600 text-white font-semibold rounded-lg shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-pink-400 focus:ring-offset-2 focus:ring-offset-pink-50 dark:focus:ring-offset-gray-850">
            Post Comment
          </button>
        </div>
      </div>

      <!-- Comment List -->
      <div class="space-y-6 sm:space-y-8">
        <!-- Comment 1 -->
        <article class="flex items-start space-x-4 p-4 rounded-lg bg-pink-50 dark:bg-gray-800 border border-pink-100 dark:border-gray-700">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-mint-300 dark:border-cyan-600" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Alice Wonderland">
          <div class="flex-1">
            <div class="flex justify-between items-center mb-1">
              <h4 class="font-bold text-gray-800 dark:text-white">Alice Wonderland</h4>
              <span class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm lg:text-base">This explanation really clarified the concept for me! The examples were perfectly chosen. Thank you so much!</p>
            <div class="mt-3 flex items-center space-x-4 text-sm">
              <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
                <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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                <span>Like (5)</span>
              </button>
              <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
                <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 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
                <span>Reply</span>
              </button>
            </div>

            <!-- Reply Slot -->
            <div class="mt-4 pl-8 border-l-2 border-mint-200 dark:border-cyan-700 space-y-4">
              <article class="flex items-start space-x-4 p-3 rounded-lg bg-pink-100 dark:bg-gray-750 border border-pink-200 dark:border-gray-700">
                <img class="w-8 h-8 rounded-full object-cover border-2 border-pink-300 dark:border-fuchsia-600" src="https://randomuser.me/api/portraits/men/55.jpg" alt="Bob The Builder">
                <div class="flex-1">
                  <div class="flex justify-between items-center mb-1">
                    <h4 class="font-bold text-gray-800 dark:text-white">Bob The Builder</h4>
                    <span class="text-xs text-gray-500 dark:text-gray-400">1 hour ago</span>
                  </div>
                  <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm">@Alice Wonderland, I agree! This was super helpful. Learning a lot.</p>
                  <div class="mt-2 flex items-center space-x-4 text-xs">
                    <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
                      <svg class="w-3 h-3 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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                      <span>Like (2)</span>
                    </button>
                    <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
                      <svg class="w-3 h-3 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 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
                      <span>Reply</span>
                    </button>
                  </div>
                </div>
              </article>
            </div>
          </div>
        </article>

        <!-- Comment 2 -->
        <article class="flex items-start space-x-4 p-4 rounded-lg bg-pink-50 dark:bg-gray-800 border border-pink-100 dark:border-gray-700">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-pink-300 dark:border-fuchsia-600" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Charlie Chaplin">
          <div class="flex-1">
            <div class="flex justify-between items-center mb-1">
              <h4 class="font-bold text-gray-800 dark:text-white">Charlie Chaplin</h4>
              <span class="text-xs text-gray-500 dark:text-gray-400">1 day ago</span>
            </div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-sm lg:text-base">Could you perhaps elaborate a bit more on the third point? I'm finding it slightly challenging to grasp the nuances. Thanks in advance!</p>
            <div class="mt-3 flex items-center space-x-4 text-sm">
              <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
                <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="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
                <span>Like (3)</span>
              </button>
              <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
                <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 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path></svg>
                <span>Reply</span>
              </button>
            </div>
          </div>
        </article>
      </div>
    </div>
  </div>
</section>