Neon_Glow_Comments_Section

<div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-8 md:p-12 lg:p-16 flex justify-center items-center">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden">
    <!-- Neon Border Effect -->
    <div class="absolute inset-0 rounded-lg pointer-events-none 
                before:absolute before:inset-0 before:rounded-lg before:border-2 before:border-purple-500 
                before:dark:border-purple-600 before:shadow-[0_0_15px_rgba(168,85,247,0.7),_inset_0_0_10px_rgba(168,85,247,0.5)] 
                after:absolute after:inset-0 after:rounded-lg after:border-2 after:border-pink-500 
                after:dark:border-pink-600 after:shadow-[0_0_15px_rgba(236,72,153,0.7),_inset_0_0_10px_rgba(236,72,153,0.5)] 
                before:animate-pulse after:animate-pulse-slow
                dark:before:shadow-[0_0_20px_rgba(168,85,247,0.9),_inset_0_0_15px_rgba(168,85,247,0.7)]
                dark:after:shadow-[0_0_20px_rgba(236,72,153,0.9),_inset_0_0_15px_rgba(236,72,153,0.7)]
                "></div>

    <h2 class="text-3xl sm:text-4xl font-extrabold mb-8 text-center 
               bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500 
               dark:from-purple-400 dark:to-pink-400 
               shadow-text-glow 
               relative z-10">
      Comments
    </h2>

    <!-- New Comment Input -->
    <div class="mb-8 relative z-10">
      <textarea class="w-full p-4 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-400 
                       border border-transparent focus:border-purple-500 focus:ring-2 focus:ring-purple-500 focus:outline-none 
                       shadow-inner shadow-purple-200 dark:shadow-purple-900/50 
                       transition-all duration-300 ease-in-out
                       text-base sm:text-lg"
                placeholder="Write a comment..."></textarea>
      <button class="mt-4 inline-flex items-center px-6 py-3 rounded-full text-white 
                     bg-gradient-to-r from-purple-600 to-pink-600 
                     hover:from-purple-700 hover:to-pink-700 
                     dark:from-purple-500 dark:to-pink-500
                     dark:hover:from-purple-600 dark:hover:to-pink-600
                     shadow-lg shadow-purple-500/50 dark:shadow-purple-800/50 
                     hover:shadow-xl hover:shadow-purple-600/60 dark:hover:shadow-purple-700/60 
                     transition-all duration-300 ease-in-out
                     font-semibold text-base sm:text-lg">
        Post Comment
        <svg class="ml-2 -mr-1 w-5 h-5" 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="M9 5l7 7-7 7"></path>
        </svg>
      </button>
    </div>

    <!-- Comments List -->
    <div class="space-y-6 relative z-10">
      <!-- Comment 1 -->
      <div class="flex items-start bg-gray-50 dark:bg-gray-700 p-4 sm:p-6 rounded-lg 
                  shadow-md shadow-purple-100 dark:shadow-purple-900/30 
                  border border-transparent hover:border-purple-400 dark:hover:border-purple-600 
                  transition-all duration-300 ease-in-out 
                  relative group">
        <img class="w-12 h-12 sm:w-14 sm:h-14 rounded-full mr-4 sm:mr-6 object-cover 
                    border-2 border-purple-400 dark:border-purple-500 
                    shadow-md shadow-purple-300 dark:shadow-purple-800/50"
             src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
        <div class="flex-1">
          <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-2">
            <p class="font-bold text-lg sm:text-xl text-purple-600 dark:text-purple-400 
                      tracking-tight leading-tight 
                      group-hover:text-purple-700 dark:group-hover:text-purple-300">
              Jane Doe
            </p>
            <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 ml-0 sm:ml-4 mt-1 sm:mt-0">
              2 hours ago
            </span>
          </div>
          <p class="text-gray-700 dark:text-gray-200 text-base sm:text-lg mb-3 leading-relaxed">
            This design is absolutely stunning! The neon glow really makes it pop. Great job!
          </p>
          <button class="text-pink-600 dark:text-pink-400 
                         font-semibold text-sm sm:text-base 
                         hover:text-pink-700 dark:hover:text-pink-300 
                         transition-colors duration-200 ease-in-out 
                         relative 
                         before:absolute before:w-full before:h-0.5 before:bg-pink-500 before:-bottom-1 before:left-0 
                         before:scale-x-0 before:origin-left before:transition-transform before:duration-300
                         hover:before:scale-x-100">
            Reply
          </button>
        </div>
      </div>

      <!-- Comment 2 -->
      <div class="flex items-start bg-gray-50 dark:bg-gray-700 p-4 sm:p-6 rounded-lg 
                  shadow-md shadow-purple-100 dark:shadow-purple-900/30 
                  border border-transparent hover:border-purple-400 dark:hover:border-purple-600 
                  transition-all duration-300 ease-in-out 
                  relative group">
        <img class="w-12 h-12 sm:w-14 sm:h-14 rounded-full mr-4 sm:mr-6 object-cover 
                    border-2 border-pink-400 dark:border-pink-500 
                    shadow-md shadow-pink-300 dark:shadow-pink-800/50"
             src="https://randomuser.me/api/portraits/men/82.jpg" alt="Avatar">
        <div class="flex-1">
          <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-2">
            <p class="font-bold text-lg sm:text-xl text-pink-600 dark:text-pink-400 
                      tracking-tight leading-tight 
                      group-hover:text-pink-700 dark:group-hover:text-pink-300">
              John Smith
            </p>
            <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 ml-0 sm:ml-4 mt-1 sm:mt-0">
              1 day ago
            </span>
          </div>
          <p class="text-gray-700 dark:text-gray-200 text-base sm:text-lg mb-3 leading-relaxed">
            Agreed! The colors are incredibly vibrant and energetic. Perfect for a social media app.
          </p>
          <button class="text-purple-600 dark:text-purple-400 
                         font-semibold text-sm sm:text-base 
                         hover:text-purple-700 dark:hover:text-purple-300 
                         transition-colors duration-200 ease-in-out 
                         relative 
                         before:absolute before:w-full before:h-0.5 before:bg-purple-500 before:-bottom-1 before:left-0 
                         before:scale-x-0 before:origin-left before:transition-transform before:duration-300
                         hover:before:scale-x-100">
            Reply
          </button>
          <!-- Nested Reply -->
          <div class="mt-4 pl-8 sm:pl-10 border-l-2 border-pink-300 dark:border-pink-700 ml-4 sm:ml-6">
            <div class="flex items-start bg-gray-100 dark:bg-gray-600 p-3 sm:p-4 rounded-lg 
                        shadow-sm shadow-pink-100 dark:shadow-pink-900/30 
                        border border-transparent hover:border-pink-400 dark:hover:border-pink-600 
                        transition-all duration-300 ease-in-out 
                        relative group">
              <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full mr-3 sm:mr-4 object-cover
                          border-2 border-pink-400 dark:border-pink-500 
                          shadow-md shadow-pink-300 dark:shadow-pink-800/50"
                   src="https://randomuser.me/api/portraits/women/22.jpg" alt="Avatar">
              <div class="flex-1">
                <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-1">
                  <p class="font-bold text-md sm:text-lg text-pink-600 dark:text-pink-400 
                            tracking-tight leading-tight 
                            group-hover:text-pink-700 dark:group-hover:text-pink-300">
                    Sarah Green
                  </p>
                  <span class="text-xs text-gray-500 dark:text-gray-400 ml-0 sm:ml-4 mt-1 sm:mt-0">
                    23 hours ago
                  </span>
                </div>
                <p class="text-gray-700 dark:text-gray-200 text-sm sm:text-base mb-2 leading-relaxed">
                  Thanks for the feedback, John! I tried to capture that energetic feel.
                </p>
                <button class="text-purple-600 dark:text-purple-400 
                               font-semibold text-xs sm:text-sm 
                               hover:text-purple-700 dark:hover:text-purple-300 
                               transition-colors duration-200 ease-in-out 
                               relative 
                               before:absolute before:w-full before:h-0.5 before:bg-purple-500 before:-bottom-1 before:left-0 
                               before:scale-x-0 before:origin-left before:transition-transform before:duration-300
                               hover:before:scale-x-100">
                  Reply
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
/* Define custom keyframes for glowing text and slow pulse animation */
@keyframes text-glow {
  0%, 100% { text-shadow: 0 0 5px rgba(168, 85, 247, 0.5), 0 0 10px rgba(236, 72, 153, 0.5); }
  50% { text-shadow: 0 0 10px rgba(168, 85, 247, 0.8), 0 0 20px rgba(236, 72, 153, 0.8); }
}

@keyframes text-glow-dark {
  0%, 100% { text-shadow: 0 0 8px rgba(168, 85, 247, 0.7), 0 0 15px rgba(236, 72, 153, 0.7); }
  50% { text-shadow: 0 0 15px rgba(168, 85, 247, 1), 0 0 30px rgba(236, 72, 153, 1); }
}

@keyframes pulse-slow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.shadow-text-glow {
  animation: text-glow 3s ease-in-out infinite;
}

html.dark .shadow-text-glow {
  animation: text-glow-dark 3s ease-in-out infinite;
}

.animate-pulse-slow {
  animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
</style>