Neumorphic_Neon_Comments_Section

<div class="p-4 sm:p-6 md:p-8 min-h-screen bg-gradient-to-br from-indigo-900 to-purple-900 text-gray-200 dark:from-gray-900 dark:to-black font-sans">
  <div class="max-w-3xl mx-auto backdrop-blur-sm bg-gradient-to-br from-indigo-800/60 to-purple-700/60 p-6 sm:p-8 rounded-3xl shadow-[5px_5px_15px_#2a0050,-5px_-5px_15px_#5a00ac] dark:shadow-[5px_5px_15px_#0a0a0a,-5px_-5px_15px_#2a2a2a] border border-transparent dark:border-gray-800">

    <h2 class="text-3xl sm:text-4xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-lime-300 to-fuchsia-400 mb-8 pb-2 border-b border-purple-600 dark:border-gray-700 text-center">
      Comments
    </h2>

    <!-- New Comment Input -->
    <div class="mb-8 p-4 sm:p-6 rounded-2xl bg-gradient-to-br from-indigo-900 via-purple-900 to-fuchsia-900 shadow-[inset_3px_3px_7px_#1a0033,inset_-3px_-3px_7px_#4a0077] dark:bg-gradient-to-br dark:from-gray-800 dark:via-gray-900 dark:to-black dark:shadow-[inset_3px_3px_7px_#1a1a1a,inset_-3px_-3px_7px_#3a3a3a] transition-all duration-300">
      <textarea class="w-full p-3 sm:p-4 rounded-xl bg-purple-900/40 border border-purple-700 text-lime-100 placeholder:text-purple-300 focus:outline-none focus:ring-2 focus:ring-cyan-400 shadow-[inset_2px_2px_5px_#1a0033,inset_-2px_-2px_5px_#4a0077] dark:bg-gray-700/40 dark:border-gray-600 dark:text-gray-100 dark:placeholder:text-gray-400 dark:focus:ring-blue-400 resize-none h-24 mb-4 transition-all duration-300" placeholder="Join the conversation..."></textarea>
      <button class="w-full py-3 px-6 rounded-full bg-gradient-to-r from-lime-400 to-cyan-400 text-purple-900 font-bold text-lg uppercase tracking-wide hover:from-lime-500 hover:to-cyan-500 shadow-[3px_3px_7px_#1a0033,-3px_-3px_7px_#4a0077] dark:shadow-[3px_3px_7px_#1a1a1a,-3px_-3px_7px_#3a3a3a] transition-all duration-300 transform hover:-translate-y-0.5 hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-900 focus:ring-lime-300">
        Post Comment
      </button>
    </div>

    <!-- Comment List -->
    <div class="space-y-6">

      <!-- Comment 1 -->
      <div class="p-4 sm:p-5 rounded-2xl bg-gradient-to-br from-indigo-800/70 to-purple-700/70 shadow-[5px_5px_10px_#2a0050,-5px_-5px_10px_#5a00ac] dark:bg-gradient-to-br dark:from-gray-800/70 dark:to-gray-900/70 dark:shadow-[5px_5px_10px_#0a0a0a,-5px_-5px_10px_#2a2a2a] transition-all duration-300">
        <div class="flex items-center mb-3">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-lime-400 shadow-md" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lime-300 text-lg">ElectricEcho</p>
            <p class="text-xs text-purple-300">2 hours ago</p>
          </div>
        </div>
        <p class="text-gray-100 mb-4 leading-relaxed">This show is absolutely mind-blowing! The special effects are next level. Can't wait for the next episode!</p>
        <div class="flex justify-end gap-4 text-purple-300">
          <button class="flex items-center text-sm font-medium px-3 py-1.5 rounded-full bg-indigo-900/50 hover:bg-indigo-700/50 shadow-[inset_2px_2px_5px_#1a0033,inset_-2px_-2px_5px_#4a0077] dark:shadow-[inset_2px_2px_5px_#1a1a1a,inset_-2px_-2px_5px_#3a3a3a] transition-all duration-300 hover:text-cyan-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-900 focus:ring-cyan-400">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg> 1.2K
          </button>
          <button class="flex items-center text-sm font-medium px-3 py-1.5 rounded-full bg-indigo-900/50 hover:bg-indigo-700/50 shadow-[inset_2px_2px_5px_#1a0033,inset_-2px_-2px_5px_#4a0077] dark:shadow-[inset_2px_2px_5px_#1a1a1a,inset_-2px_-2px_5px_#3a3a3a] transition-all duration-300 hover:text-cyan-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-900 focus:ring-cyan-400">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H14a5 5 0 015 5v2a1 1 0 11-2 0v-2a3 3 0 00-3-3H5.414l2.293 2.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg> Reply
          </button>
        </div>
      </div>

      <!-- Comment 2 -->
      <div class="p-4 sm:p-5 rounded-2xl bg-gradient-to-br from-indigo-800/70 to-purple-700/70 shadow-[5px_5px_10px_#2a0050,-5px_-5px_10px_#5a00ac] dark:bg-gradient-to-br dark:from-gray-800/70 dark:to-gray-900/70 dark:shadow-[5px_5px_10px_#0a0a0a,-5px_-5px_10px_#2a2a2a] transition-all duration-300">
        <div class="flex items-center mb-3">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-lime-400 shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lime-300 text-lg">NeonStreamer</p>
            <p class="text-xs text-purple-300">1 day ago</p>
          </div>
        </div>
        <p class="text-gray-100 mb-4 leading-relaxed">Totally agree! The plot twists are insane. What's everyone's favorite character so far?</p>
        <div class="flex justify-end gap-4 text-purple-300">
          <button class="flex items-center text-sm font-medium px-3 py-1.5 rounded-full bg-indigo-900/50 hover:bg-indigo-700/50 shadow-[inset_2px_2px_5px_#1a0033,inset_-2px_-2px_5px_#4a0077] dark:shadow-[inset_2px_2px_5px_#1a1a1a,inset_-2px_-2px_5px_#3a3a3a] transition-all duration-300 hover:text-cyan-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-900 focus:ring-cyan-400">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg> 873
          </button>
          <button class="flex items-center text-sm font-medium px-3 py-1.5 rounded-full bg-indigo-900/50 hover:bg-indigo-700/50 shadow-[inset_2px_2px_5px_#1a0033,inset_-2px_-2px_5px_#4a0077] dark:shadow-[inset_2px_2px_5px_#1a1a1a,inset_-2px_-2px_5px_#3a3a3a] transition-all duration-300 hover:text-cyan-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-900 focus:ring-cyan-400">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H14a5 5 0 015 5v2a1 1 0 11-2 0v-2a3 3 0 00-3-3H5.414l2.293 2.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg> Reply
          </button>
        </div>
        <!-- Nested Comment (Reply) -->
        <div class="ml-8 mt-5 p-3 sm:p-4 rounded-xl bg-gradient-to-br from-indigo-900/60 to-purple-800/60 shadow-[inset_3px_3px_7px_#1a0033,inset_-3px_-3px_7px_#4a0077] dark:bg-gradient-to-br dark:from-gray-700/60 dark:to-gray-800/60 dark:shadow-[inset_3px_3px_7px_#1a1a1a,inset_-3px_-3px_7px_#3a3a3a] transition-all duration-300">
          <div class="flex items-center mb-2">
            <img class="w-8 h-8 rounded-full mr-3 border border-pink-400 shadow-sm" src="https://randomuser.me/api/portraits/men/8.jpg" alt="User Avatar">
            <div>
              <p class="font-medium text-cyan-300">GlowGaming</p>
              <p class="text-xs text-purple-400">20 hours ago</p>
            </div>
          </div>
          <p class="text-gray-200 mb-3 leading-snug">Definitely the main protagonist! Their character arc is just incredible.</p>
          <div class="flex justify-end gap-3 text-purple-400">
            <button class="flex items-center text-xs font-medium px-2 py-1 rounded-full bg-indigo-900/40 hover:bg-indigo-700/40 shadow-[inset_1px_1px_3px_#1a0033,inset_-1px_-1px_3px_#4a0077] dark:shadow-[inset_1px_1px_3px_#1a1a1a,inset_-1px_-1px_3px_#3a3a3a] transition-all duration-300 hover:text-pink-300 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-offset-indigo-900 focus:ring-pink-400">
              <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg> 55
            </button>
            <button class="flex items-center text-xs font-medium px-2 py-1 rounded-full bg-indigo-900/40 hover:bg-indigo-700/40 shadow-[inset_1px_1px_3px_#1a0033,inset_-1px_-1px_3px_#4a0077] dark:shadow-[inset_1px_1px_3px_#1a1a1a,inset_-1px_-1px_3px_#3a3a3a] transition-all duration-300 hover:text-pink-300 focus:outline-none focus:ring-1 focus:ring-offset-1 focus:ring-offset-indigo-900 focus:ring-pink-400">
              <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H14a5 5 0 015 5v2a1 1 0 11-2 0v-2a3 3 0 00-3-3H5.414l2.293 2.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg> Reply
            </button>
          </div>
        </div>
      </div>

      <!-- Comment 3 -->
      <div class="p-4 sm:p-5 rounded-2xl bg-gradient-to-br from-indigo-800/70 to-purple-700/70 shadow-[5px_5px_10px_#2a0050,-5px_-5px_10px_#5a00ac] dark:bg-gradient-to-br dark:from-gray-800/70 dark:to-gray-900/70 dark:shadow-[5px_5px_10px_#0a0a0a,-5px_-5px_10px_#2a2a2a] transition-all duration-300">
        <div class="flex items-center mb-3">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-lime-400 shadow-md" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lime-300 text-lg">CyberspaceFan</p>
            <p class="text-xs text-purple-300">3 days ago</p>
          </div>
        </div>
        <p class="text-gray-100 mb-4 leading-relaxed">Rewatching this for the third time already. So many hidden details! Anyone else catch the subtle easter egg in episode 4?</p>
        <div class="flex justify-end gap-4 text-purple-300">
          <button class="flex items-center text-sm font-medium px-3 py-1.5 rounded-full bg-indigo-900/50 hover:bg-indigo-700/50 shadow-[inset_2px_2px_5px_#1a0033,inset_-2px_-2px_5px_#4a0077] dark:shadow-[inset_2px_2px_5px_#1a1a1a,inset_-2px_-2px_5px_#3a3a3a] transition-all duration-300 hover:text-cyan-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-900 focus:ring-cyan-400">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg> 451
          </button>
          <button class="flex items-center text-sm font-medium px-3 py-1.5 rounded-full bg-indigo-900/50 hover:bg-indigo-700/50 shadow-[inset_2px_2px_5px_#1a0033,inset_-2px_-2px_5px_#4a0077] dark:shadow-[inset_2px_2px_5px_#1a1a1a,inset_-2px_-2px_5px_#3a3a3a] transition-all duration-300 hover:text-cyan-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-indigo-900 focus:ring-cyan-400">
            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.707 3.293a1 1 0 010 1.414L5.414 7H14a5 5 0 015 5v2a1 1 0 11-2 0v-2a3 3 0 00-3-3H5.414l2.293 2.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg> Reply
          </button>
        </div>
      </div>

    </div>
  </div>
</div>