Comments Section 구성 요소

<section class="py-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 min-h-screen dark:from-gray-900 dark:via-purple-900 dark:to-blue-900">
  <div class="max-w-4xl mx-auto backdrop-blur-lg bg-white/30 dark:bg-gray-800/30 rounded-3xl shadow-xl p-6 sm:p-8 lg:p-10 border border-white/20 dark:border-gray-700/20">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-white mb-8 text-center drop-shadow-lg dark:text-purple-300">Comments</h2>

    <!-- New Comment Form -->
    <div class="mb-10 p-6 backdrop-blur-md bg-white/20 dark:bg-gray-800/20 rounded-2xl border border-white/20 dark:border-gray-700/20 shadow-md">
      <h3 class="text-2xl font-bold text-white mb-4 dark:text-purple-200">Leave a Comment</h3>
      <form>
        <div class="mb-4">
          <label for="comment-name" class="block text-white text-sm font-semibold mb-2 dark:text-purple-100">Your Name</label>
          <input type="text" id="comment-name" placeholder="John Doe" class="w-full px-4 py-3 rounded-xl bg-white/40 border border-white/30 focus:outline-none focus:ring-2 focus:ring-purple-400 placeholder-white/70 text-white dark:bg-gray-700/40 dark:border-gray-600/30 dark:focus:ring-purple-600 dark:placeholder-gray-400" />
        </div>
        <div class="mb-6">
          <label for="comment-text" class="block text-white text-sm font-semibold mb-2 dark:text-purple-100">Your Comment</label>
          <textarea id="comment-text" rows="5" placeholder="Share your thoughts..." class="w-full px-4 py-3 rounded-xl bg-white/40 border border-white/30 focus:outline-none focus:ring-2 focus:ring-purple-400 placeholder-white/70 text-white resize-y dark:bg-gray-700/40 dark:border-gray-600/30 dark:focus:ring-purple-600 dark:placeholder-gray-400"></textarea>
        </div>
        <button type="submit" class="w-full sm:w-auto px-8 py-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white font-bold rounded-xl shadow-lg hover:from-purple-700 hover:to-indigo-700 focus:outline-none focus:ring-4 focus:ring-purple-300 transform transition-transform duration-300 hover:scale-105 dark:from-purple-700 dark:to-indigo-700 dark:hover:from-purple-800 dark:hover:to-indigo-800">
          Post Comment
        </button>
      </form>
    </div>

    <!-- Existing Comments -->
    <div class="space-y-8">
      <!-- Comment 1 -->
      <div class="p-6 backdrop-blur-md bg-white/20 dark:bg-gray-800/20 rounded-2xl border border-white/20 dark:border-gray-700/20 shadow-md flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-white dark:border-purple-300/50 flex-shrink-0">
        <div class="flex-grow">
          <p class="font-bold text-lg text-white dark:text-pink-200 mb-1">Emily Watson</p>
          <p class="text-sm text-white/80 dark:text-gray-300 mb-3">2 days ago</p>
          <p class="text-white leading-relaxed dark:text-gray-200">"This article provided such a fresh perspective on the topic. The glassmorphism design really makes the content pop! Love how interactive and readable it is."</p>
        </div>
      </div>

      <!-- Comment 2 -->
      <div class="p-6 backdrop-blur-md bg-white/20 dark:bg-gray-800/20 rounded-2xl border border-white/20 dark:border-gray-700/20 shadow-md flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-white dark:border-purple-300/50 flex-shrink-0">
        <div class="flex-grow">
          <p class="font-bold text-lg text-white dark:text-pink-200 mb-1">Mark Johnson</p>
          <p class="text-sm text-white/80 dark:text-gray-300 mb-3">5 hours ago</p>
          <p class="text-white leading-relaxed dark:text-gray-200">"Fantastic read! The glassmorphism elements are a nice touch, adding a modern feel without distracting from the text. Great job with the responsive layout, too."</p>
        </div>
      </div>

      <!-- Comment 3 -->
      <div class="p-6 backdrop-blur-md bg-white/20 dark:bg-gray-800/20 rounded-2xl border border-white/20 dark:border-gray-700/20 shadow-md flex flex-col sm:flex-row items-start sm:items-center space-y-4 sm:space-y-0 sm:space-x-6">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-white dark:border-purple-300/50 flex-shrink-0">
        <div class="flex-grow">
          <p class="font-bold text-lg text-white dark:text-pink-200 mb-1">Sarah Lee</p>
          <p class="text-sm text-white/80 dark:text-gray-300 mb-3">1 day ago</p>
          <p class="text-white leading-relaxed dark:text-gray-200">"I appreciate the clear explanations and engaging content. The visual style of this page is truly inspiring and makes reading a pleasure. Can't wait for your next article!"</p>
        </div>
      </div>
    </div>
  </div>
</section>