Comments Section 구성 요소

<div class="font-sans antialiased bg-orange-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8">
  <div class="max-w-xl mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 transform hover:scale-[1.01] focus-within:scale-[1.01] border border-orange-200 dark:border-gray-700">
    <div class="p-6 sm:p-8 bg-gradient-to-r from-orange-100 to-amber-100 dark:from-gray-700 dark:to-gray-800 border-b border-orange-200 dark:border-gray-700">
      <h2 class="text-2xl sm:text-3xl font-bold text-orange-800 dark:text-orange-300 mb-2 interaction-grow-text">
        Harvest Thoughts
      </h2>
      <p class="text-orange-700 dark:text-orange-400 text-sm sm:text-base">
        Share your insights and experiences from the field.
      </p>
    </div>

    <div class="p-6 sm:p-8 space-y-6">
      <!-- Comment 1 -->
      <div class="flex items-start space-x-4 group">
        <img class="w-10 h-10 rounded-full object-cover ring-2 ring-orange-400 dark:ring-orange-500 transition-transform duration-200 group-hover:scale-105" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex justify-between items-baseline mb-1">
            <p class="font-semibold text-orange-700 dark:text-orange-300 interaction-glow-text">Marcus Farmhand</p>
            <span class="text-xs text-gray-500 dark:text-gray-400">2 days ago</span>
          </div>
          <p class="text-gray-700 dark:text-gray-300 leading-relaxed">
            "Great write-up! We've had similar success with cover crops in our rotation. Helps a lot with soil health."</p>
        </div>
      </div>

      <!-- Comment 2 -->
      <div class="flex items-start space-x-4 group">
        <img class="w-10 h-10 rounded-full object-cover ring-2 ring-orange-400 dark:ring-orange-500 transition-transform duration-200 group-hover:scale-105" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div class="flex-1">
          <div class="flex justify-between items-baseline mb-1">
            <p class="font-semibold text-orange-700 dark:text-orange-300 interaction-glow-text">Anya Gardener</p>
            <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">
            "Question: What's the best natural pest control for aphids on tomatoes? Always a challenge this time of year!"</p>
        </div>
      </div>

      <!-- Add Comment Form -->
      <div class="pt-6 border-t border-orange-200 dark:border-gray-700">
        <h3 class="text-lg font-semibold text-orange-800 dark:text-orange-300 mb-4 interaction-grow-text">Leave a New Comment</h3>
        <form class="space-y-4">
          <textarea class="w-full p-3 rounded-lg border border-orange-300 dark:border-gray-600 bg-orange-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-orange-500 focus:border-transparent outline-none transition duration-200 ease-in-out transform focus:scale-[1.01] hover:shadow-md" rows="4" placeholder="Share your thoughts..."></textarea>
          <button type="submit" class="w-full py-3 px-4 bg-orange-600 hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 text-white font-bold rounded-lg shadow-md transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-800 interaction-pulsate">
            Post Comment
          </button>
        </form>
      </div>
    </div>
  </div>
</div>

<!-- Microinteraction styles (optional, could be in a separate CSS file or utility classes) -->
<style>
/* Example for grow-text and pulsate interactions */
.interaction-grow-text:hover {
  text-shadow: 0px 0px 8px rgba(251, 146, 60, 0.5); /* Tailwind orange-400 with blur */
  transform: scale(1.02);
  transition: all 0.2s ease-out;
}

.interaction-glow-text:hover {
  text-shadow: 0px 0px 6px rgba(251, 146, 60, 0.7); /* Tailwind orange-400 with more blur */
}

@keyframes pulsate {
  0% {
    box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.4); /* Tailwind orange-600 */
  }
  70% {
    box-shadow: 0 0 0 10px rgba(234, 88, 12, 0); /* Tailwind orange-600 */
  }
  100% {
    box-shadow: 0 0 0 0 rgba(234, 88, 12, 0); /* Tailwind orange-600 */
  }
}

.interaction-pulsate:hover {
  animation: pulsate 1s infinite;
}
</style>