Componente Componenti sociali

<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-purple-100 to-indigo-200 dark:from-purple-950 dark:to-indigo-950 min-h-screen font-sans antialiased">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 rounded-2xl shadow-xl overflow-hidden transform transition-all duration-300 hover:shadow-2xl hover:-translate-y-1">
    <div class="p-6 sm:p-8">
      <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-6 leading-tight">
        Exploring the Wonders of Modern Web Development
      </h1>
      <div class="flex items-center space-x-4 mb-8">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Author Avatar" class="w-12 h-12 rounded-full border-4 border-purple-400 dark:border-purple-600 shadow-md transition-transform duration-300 hover:scale-105">
        <div>
          <p class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Doe</p>
          <p class="text-sm text-gray-600 dark:text-gray-400">Published on October 26, 2023</p>
        </div>
      </div>

      <img src="https://picsum.photos/800/400?random=1" alt="Article Hero Image" class="w-full h-auto rounded-xl mb-8 shadow-lg transition-transform duration-300 hover:scale-[1.01]">

      <p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <p class="text-base sm:text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-8">
        Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
      </p>

      <!-- Social Interaction Buttons -->
      <div class="flex flex-wrap items-center justify-between gap-4 py-4 border-t border-b border-gray-200 dark:border-gray-700 mb-8">
        <div class="flex items-center space-x-4">
          <!-- Like Button -->
          <button class="flex items-center space-x-2 p-3 rounded-full bg-red-100 dark:bg-red-900 text-red-600 dark:text-red-300 hover:bg-red-200 dark:hover:bg-red-800 transition-all duration-300 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-700 group">
            <svg class="w-6 h-6 fill-current group-hover:animate-bounce" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>
            <span class="font-semibold text-lg">2.1K</span>
          </button>
          <!-- Comment Button -->
          <button class="flex items-center space-x-2 p-3 rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 hover:bg-blue-200 dark:hover:bg-blue-800 transition-all duration-300 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-700 group">
            <svg class="w-6 h-6 fill-current group-hover:rotate-6" viewBox="0 0 24 24" fill="currentColor">
              <path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"/>
            </svg>
            <span class="font-semibold text-lg">145</span>
          </button>
          <!-- Save Button -->
          <button class="flex items-center space-x-2 p-3 rounded-full bg-green-100 dark:bg-green-900 text-green-600 dark:text-green-300 hover:bg-green-200 dark:hover:bg-green-800 transition-all duration-300 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-green-300 dark:focus:ring-green-700 group">
            <svg class="w-6 h-6 fill-current group-hover:animate-wiggle" viewBox="0 0 24 24" fill="currentColor">
              <path d="M17 3H7c-1.1 0-2 .9-2 2v16l7-3 7 3V5c0-1.1-.9-2-2-2z"/>
            </svg>
            <span class="font-semibold text-lg">Save</span>
          </button>
        </div>

        <!-- Share Buttons -->
        <div class="flex flex-wrap items-center gap-3">
          <button class="p-3 rounded-full bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300 hover:bg-purple-200 dark:hover:bg-purple-800 transition-all duration-300 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700 group">
            <svg class="w-6 h-6 fill-current group-hover:rotate-12" viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h-3v7h3V2zM15 12H9v7h6v-7zM21 7h-3v14h3V7zM6 9H3v12h3V9zM0 0h24v24H0z" fill="none"></path><path d="M18 2h-3v7h3V2zM15 12H9v7h6v-7zM21 7h-3v14h3V7zM6 9H3v12h3V9z"/></svg>
          </button>
          <button class="p-3 rounded-full bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300 hover:bg-purple-200 dark:hover:bg-purple-800 transition-all duration-300 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700 group">
            <svg class="w-6 h-6 fill-current group-hover:animate-pulse" viewBox="0 0 24 24" fill="currentColor"><path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.37-.83.49-1.75.83-2.72 1.02C18.35 4.34 17.2 4 16 4c-4.07 0-7.38 3.31-7.38 7.39 0 .58.07 1.15.2 1.7C8.04 12.13 4.97 10.5 2.55 7.94c-.62 1.05-.98 2.27-.98 3.58 0 2.55 1.3 4.81 3.28 6.13-1.21-.04-2.35-.37-3.34-.92v.09c0 3.58 2.54 6.57 5.91 7.27-.6.16-1.24.24-1.9.24-.46 0-.91-.04-1.34-.13.94 2.93 3.65 5.07 6.89 5.13-2.52 1.98-5.71 3.17-9.17 3.17-1.12 0-2.22-.07-3.29-.19C2.7 20.3 6.64 22 11 22c10.45 0 16.15-8.62 16.15-16.15 0-.25-.01-.5-.02-.75.83-.6 1.56-1.35 2.13-2.2Zm-5.32 3.17c-.3-.21-.6-.4-.9-.58c-1.2-.7-2.61-1.14-4.1-1.14-1.57 0-2.91.56-4.04 1.63-1.13 1.07-1.79 2.52-1.79 4.09 0 1.57.66 3.02 1.79 4.09 1.13 1.07 2.47 1.63 4.04 1.63 1.57 0 2.91-.56 4.04-1.63 1.13-1.07 1.79-2.52 1.79-4.09 0-1.57-.66-3.02-1.79-4.09Z"></path></svg>
          </button>
          <button class="p-3 rounded-full bg-purple-100 dark:bg-purple-900 text-purple-600 dark:text-purple-300 hover:bg-purple-200 dark:hover:bg-purple-800 transition-all duration-300 transform hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700 group">
            <svg class="w-6 h-6 fill-current group-hover:animate-spin-slow" viewBox="0 0 24 24" fill="currentColor"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M20.5 4.5H3.5c-.83 0-1.5.67-1.5 1.5v12c0 .83.67 1.5 1.5 1.5h17c.83 0 1.5-.67 1.5-1.5V6c0-.83-.67-1.5-1.5-1.5zm-5 13.5H9c-.55 0-1-.45-1-1s.45-1 1-1h6c.55 0 1 .45 1 1s-.45 1-1 1zm4-7H4v-3c0-.55-.45-1-1-1s-1 .45-1 1v3H0v-3C0 4.19 1.19 3 2.65 3h18.7c1.46 0 2.65 1.19 2.65 2.65v3h-4V7z"/></svg>
          </button>
        </div>
      </div>

      <!-- Comments Section -->
      <div class="mt-8">
        <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-6">Comments (3)</h2>

        <!-- Comment 1 -->
        <div class="flex items-start space-x-4 mb-6 p-4 rounded-xl bg-gray-50 dark:bg-gray-700 shadow-md transition-all duration-300 hover:shadow-lg">
          <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Commenter Avatar" class="w-10 h-10 rounded-full border-2 border-indigo-400 dark:border-indigo-600">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">John Smith <span class="text-xs font-normal text-gray-500 dark:text-gray-400 ml-2">2 hours ago</span></p>
            <p class="text-gray-700 dark:text-gray-300 mt-1">This article is truly insightful! I learned so much about modern web development. Great job!</p>
            <button class="text-sm text-purple-600 dark:text-purple-400 hover:underline mt-2">Reply</button>
          </div>
        </div>

        <!-- Comment 2 -->
        <div class="flex items-start space-x-4 mb-6 p-4 rounded-xl bg-gray-50 dark:bg-gray-700 shadow-md transition-all duration-300 hover:shadow-lg">
          <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="Commenter Avatar" class="w-10 h-10 rounded-full border-2 border-indigo-400 dark:border-indigo-600">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Alice Johnson <span class="text-xs font-normal text-gray-500 dark:text-gray-400 ml-2">Yesterday</span></p>
            <p class="text-gray-700 dark:text-gray-300 mt-1">Fantastic read! The examples were very helpful. Looking forward to more content like this.</p>
            <button class="text-sm text-purple-600 dark:text-purple-400 hover:underline mt-2">Reply</button>
          </div>
        </div>

        <!-- Comment 3 (Nested Reply) -->
        <div class="ml-14 flex items-start space-x-4 p-4 rounded-xl bg-gray-100 dark:bg-gray-750 shadow-md transition-all duration-300 hover:shadow-lg">
          <img src="https://randomuser.me/api/portraits/men/7.jpg" alt="Commenter Avatar" class="w-10 h-10 rounded-full border-2 border-indigo-400 dark:border-indigo-600">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Bob Williams <span class="text-xs font-normal text-gray-500 dark:text-gray-400 ml-2">1 hour ago</span></p>
            <p class="text-gray-700 dark:text-gray-300 mt-1">@Alice Johnson: Agreed! Especially the part about responsiveness. Super important.</p>
            <button class="text-sm text-purple-600 dark:text-purple-400 hover:underline mt-2">Reply</button>
          </div>
        </div>


        <form class="mt-8">
          <textarea class="w-full p-4 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 placeholder-gray-500 dark:placeholder-gray-400 text-gray-900 dark:text-white focus:ring-2 focus:ring-purple-500 dark:focus:ring-purple-400 focus:border-transparent dark:focus:border-transparent resize-y min-h-[100px] transition-all duration-200" placeholder="Write your comment here..."></textarea>
          <button type="submit" class="mt-4 px-6 py-3 bg-gradient-to-r from-purple-500 to-indigo-600 dark:from-purple-600 dark:to-indigo-700 text-white font-bold rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800">
            Post Comment
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

<style>
  /* Keyframe animations for microinteractions */
  @keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }

  .group-hover\:animate-bounce:hover {
    animation: bounce 0.6s ease-in-out infinite;
  }

  @keyframes rotate-6 {
    from { transform: rotate(0deg); }
    to { transform: rotate(6deg); }
  }

  .group-hover\:rotate-6:hover {
    animation: rotate-6 0.3s forwards;
  }

  @keyframes wiggle {
    0%, 7% { transform: rotate(0); }
    15% { transform: rotate(-10deg); }
    20% { transform: rotate(5deg); }
    25% { transform: rotate(-5deg); }
    30% { transform: rotate(0); }
    100% { transform: rotate(0); }
  }

  .group-hover\:animate-wiggle:hover {
    animation: wiggle 0.6s ease-in-out infinite;
  }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .7; }
  }

  .group-hover\:animate-pulse:hover {
    animation: pulse 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  @keyframes spin-slow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }

  .group-hover\:animate-spin-slow:hover {
    animation: spin-slow 2s linear infinite;
  }

  /* Add more specific override for group-hover if Tailwind's default is not applying correctly */
  /* For example, for the rotate-12 on share buttons */
  /* .group:hover svg.group-hover\:rotate-12 { transform: rotate(12deg); } */
</style>