Search Components

Comments Section

Area where users can post comments

Neumorphic_Neon_Comments_Section

A neumorphic comments section component with a neon/electric color scheme, designed for entertainment/media platforms. Features responsive layout, dark mode support, and interactive elements. Each comment displays an avatar, username, timestamp, and comment text, with like and reply buttons.

Open Preview

                <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>

Neon_Glow_Comments_Section

A responsive comments section component with a vibrant neon/glow aesthetic, featuring user avatars, timestamps, and a reply button. Supports dark mode and is designed for social media interfaces.

Open Preview

                <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>

Comments Section Component

A simple, clean, and minimalist comments section component with a retro/vintage color palette, designed for documentation or wiki sites. It is fully responsive and supports dark mode.

Open Preview

                <section class="font-sans antialiased bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200 py-6 sm:py-8 lg:py-12">
  <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-2xl sm:text-3xl font-light tracking-tight mb-6 sm:mb-8 text-gray-700 dark:text-gray-100">
      Comments
    </h2>

    <div class="bg-white rounded-md p-4 sm:p-6 shadow-sm dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
      <!-- Comment Input/Add Section -->
      <div class="mb-6">
        <form>
          <textarea class="w-full p-3 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-stone-500 focus:border-stone-500 bg-gray-50 text-gray-800 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 placeholder-gray-400 dark:placeholder-gray-300" rows="3" placeholder="Add a comment..."></textarea>
          <div class="flex justify-end mt-3">
            <button type="submit" class="px-4 py-2 text-sm font-medium rounded-md bg-zinc-600 text-white hover:bg-zinc-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-zinc-500 dark:bg-zinc-500 dark:hover:bg-zinc-600 dark:focus:ring-zinc-400">
              Post Comment
            </button>
          </div>
        </form>
      </div>

      <!-- Existing Comments Section -->
      <div class="space-y-4 sm:space-y-5">
        <!-- Comment 1 -->
        <div class="flex items-start">
          <img class="w-9 h-9 sm:w-10 sm:h-10 rounded-full mr-3 sm:mr-4 object-cover border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar of Sarah"> 
          <div>
            <p class="text-sm font-medium text-gray-700 dark:text-gray-200">Sarah J.</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">2 days ago</p>
            <p class="text-sm text-gray-800 dark:text-gray-200 leading-relaxed">
              This documentation is very clear and concise. Thanks for the effort!
            </p>
          </div>
        </div>

        <!-- Comment 2 -->
        <div class="flex items-start">
          <img class="w-9 h-9 sm:w-10 sm:h-10 rounded-full mr-3 sm:mr-4 object-cover border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of John"> 
          <div>
            <p class="text-sm font-medium text-gray-700 dark:text-gray-200">John D.</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">1 day ago</p>
            <p class="text-sm text-gray-800 dark:text-gray-200 leading-relaxed">
              I found a small typo on line 42, but overall, excellent work!
            </p>
          </div>
        </div>

        <!-- Comment 3 (Newer) -->
        <div class="flex items-start">
          <img class="w-9 h-9 sm:w-10 sm:h-10 rounded-full mr-3 sm:mr-4 object-cover border border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Avatar of Emily"> 
          <div>
            <p class="text-sm font-medium text-gray-700 dark:text-gray-200">Emily R.</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">5 hours ago</p>
            <p class="text-sm text-gray-800 dark:text-gray-200 leading-relaxed">
              Could you add an example for the `parse()` function? That would be very helpful.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Comments Section Component

A glassmorphism-inspired comments section component for blogs or content pages, featuring frosted glass-like translucent elements, vibrant colors, responsiveness, and dark mode support.

Open Preview

                <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>

Comments Section Component

A minimalist/flat design comments section component for e-commerce with vibrant colors, moderate complexity, responsive design, and dark theme support.

Open Preview

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4">Customer Reviews</h2>

  <!-- Comment 1 -->
  <div class="mb-6 flex">
    <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
    <div>
      <div class="flex items-center mb-2">
        <p class="font-semibold text-blue-600 dark:text-blue-400">Sarah J.</p>
        <p class="text-gray-500 dark:text-gray-400 text-sm ml-4">2 days ago</p>
      </div>
      <div class="flex items-center mb-2">
        <span class="text-yellow-400">★★★★★</span>
      </div>
      <p class="text-gray-700 dark:text-gray-300 leading-relaxed">"Absolutely love this product! The quality is superb and it arrived so quickly. Highly recommend!"</p>
    </div>
  </div>

  <!-- Comment 2 -->
  <div class="mb-6 flex">
    <img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
    <div>
      <div class="flex items-center mb-2">
        <p class="font-semibold text-blue-600 dark:text-blue-400">Mark T.</p>
        <p class="text-gray-500 dark:text-gray-400 text-sm ml-4">5 days ago</p>
      </div>
      <div class="flex items-center mb-2">
        <span class="text-yellow-400">★★★★☆</span>
      </div>
      <p class="text-gray-700 dark:text-gray-300 leading-relaxed">"Good product overall. It does what it says. Shipping was a bit slow, but worth the wait."</p>
    </div>
  </div>

  <!-- Comment Form (moderate complexity interactive feature) -->
  <div class="mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
    <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Leave a Review</h3>
    <form>
      <div class="mb-4">
        <label for="rating" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Your Rating</label>
        <select id="rating" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 dark:text-white dark:border-gray-600">
          <option>★★★★★ - Excellent</option>
          <option>★★★★☆ - Very Good</option>
          <option>★★★☆☆ - Good</option>
          <option>★★☆☆☆ - Fair</option>
          <option>★☆☆☆☆ - Poor</option>
        </select>
      </div>
      <div class="mb-4">
        <label for="comment" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Your Comment</label>
        <textarea id="comment" rows="4" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline bg-gray-100 dark:bg-gray-700 dark:text-white dark:border-gray-600" placeholder="Share your thoughts..."></textarea>
      </div>
      <button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline transition duration-300 ease-in-out">
        Submit Review
      </button>
    </form>
  </div>
</div>

Comments Section Component

Comments section component with a monochromatic color scheme, microinteractions, and responsive design with dark theme support.

Open Preview

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Comments</h2>

  <!-- Comment 1 -->
  <div class="mb-4 flex items-start space-x-3">
    <img class="w-10 h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
    <div class="flex-1">
      <div class="flex items-center justify-between">
        <p class="font-semibold text-gray-900 dark:text-gray-100">Babe Wani</p>
        <p class="text-xs text-gray-500 dark:text-gray-400">2 days ago</p>
      </div>
      <p class="text-gray-700 dark:text-gray-300 mt-1">This dashboard is incredibly insightful! The data visualization makes complex information easy to digest.</p>
      <div class="flex items-center mt-2 text-gray-500 dark:text-gray-400 text-sm">
        <button class="flex items-center mr-4 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-1" 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="M14 10h4.764a2 2 0 011.857 2.153l-2.54 9.147a1 1 0 01-1.702.585L11 16m6 0H4a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v8z"></path></svg>
          <span>Like (12)</span>
        </button>
        <button class="flex items-center hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-1" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
          <span>Reply</span>
        </button>
      </div>
    </div>
  </div>

  <!-- Comment 2 -->
  <div class="mb-4 flex items-start space-x-3">
    <img class="w-10 h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/44.jpg" alt="User Avatar">
    <div class="flex-1">
      <div class="flex items-center justify-between">
        <p class="font-semibold text-gray-900 dark:text-gray-100">George Costanza</p>
        <p class="text-xs text-gray-500 dark:text-gray-400">1 day ago</p>
      </div>
      <p class="text-gray-700 dark:text-gray-300 mt-1">I appreciate the clear layout and the interactive elements. Makes monitoring key metrics a breeze.</p>
      <div class="flex items-center mt-2 text-gray-500 dark:text-gray-400 text-sm">
        <button class="flex items-center mr-4 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-1" 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="M14 10h4.764a2 2 0 011.857 2.153l-2.54 9.147a1 1 0 01-1.702.585L11 16m6 0H4a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v8z"></path></svg>
          <span>Like (8)</span>
        </button>
        <button class="flex items-center hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-1" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
          <span>Reply</span>
        </button>
      </div>
    </div>
  </div>

  <!-- Reply to Comment 2 -->
  <div class="mb-4 flex items-start space-x-3 ml-14">
    <img class="w-8 h-8 rounded-full object-cover" src="https://randomuser.me/api/portraits/women/72.jpg" alt="User Avatar">
    <div class="flex-1">
      <div class="flex items-center justify-between">
        <p class="font-semibold text-gray-900 dark:text-gray-100">Elaine Benes</p>
        <p class="text-xs text-gray-500 dark:text-gray-400">20 hours ago</p>
      </div>
      <p class="text-gray-700 dark:text-gray-300 mt-1">@George Costanza I totally agree! The responsiveness is also a huge plus.</p>
      <div class="flex items-center mt-2 text-gray-500 dark:text-gray-400 text-sm">
        <button class="flex items-center mr-4 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-1" 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="M14 10h4.764a2 2 0 011.857 2.153l-2.54 9.147a1 1 0 01-1.702.585L11 16m6 0H4a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v8z"></path></svg>
          <span>Like (5)</span>
        </button>
        <button class="flex items-center hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200">
          <svg class="w-4 h-4 mr-1" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
          <span>Reply</span>
        </button>
      </div>
    </div>
  </div>

  <!-- Comment 3 (New Comment) -->
  <div class="flex items-start space-x-3">
    <img class="w-10 h-10 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
    <div class="flex-1">
      <textarea class="w-full p-3 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all duration-200 resize-y" rows="3" placeholder="Add a comment..."></textarea>
      <div class="flex justify-end mt-2">
        <button class="px-5 py-2 bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-semibold rounded-lg shadow-md transition-colors duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800">
          Post Comment
        </button>
      </div>
    </div>
  </div>
</div>

Comments Section Component

Comments Section Component with Microinteractions, Pastel color scheme, Moderate complexity for Dashboard, responsive with dark theme support, using Tailwind CSS. Images from picsum.photos for images and randomuser.me for avatars. No JavaScript.

Open Preview

                <div class="container mx-auto p-4">
  <!-- Comments Section -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Comments</h2>

    <!-- New Comment Input -->
    <div class="flex items-start mb-6">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
      <div class="flex-grow">
        <textarea class="w-full p-3 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400" rows="3" placeholder="Add a comment..."></textarea>
        <button class="mt-2 px-4 py-2 bg-blue-200 text-blue-800 rounded-md hover:bg-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-blue-700 dark:text-white dark:hover:bg-blue-800">Post Comment</button>
      </div>
    </div>

    <!-- Existing Comments -->
    <div class="space-y-6">
      <!-- Comment 1 -->
      <div class="flex items-start">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="flex-grow bg-gray-100 dark:bg-gray-700 rounded-md p-4">
          <div class="flex justify-between items-center mb-2">
            <span class="font-semibold text-gray-800 dark:text-white">John Doe</span>
            <span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
          </div>
          <p class="text-gray-700 dark:text-gray-300">This is a very insightful comment. I really appreciate the details provided.</p>
          <div class="flex items-center mt-3">
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200 ease-in-out">
              <svg class="w-4 h-4 mr-1" 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="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21H5v-7h3m4 0hക്കായി-3m0 0l-1.59-1.59a2 2 0 010-2.82l1.59-1.59v6z"></path></svg>
              <span class="text-sm">Like (5)</span>
            </button>
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-green-500 dark:hover:text-green-400 ml-4 transition duration-200 ease-in-out">
              <svg class="w-4 h-4 mr-1" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.96 9.96 0 01-5.012-1.39l-3 3v-3.032A8.96 8.96 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
              <span class="text-sm">Reply</span>
            </button>
          </div>
        </div>
      </div>

      <!-- Comment 2 -->
      <div class="flex items-start">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
        <div class="flex-grow bg-gray-100 dark:bg-gray-700 rounded-md p-4">
          <div class="flex justify-between items-center mb-2">
            <span class="font-semibold text-gray-800 dark:text-white">Jane Smith</span>
            <span class="text-sm text-gray-500 dark:text-gray-400">Yesterday</span>
          </div>
          <p class="text-gray-700 dark:text-gray-300">Thanks for the great post! Very helpful.</p>
          <div class="flex items-center mt-3">
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200 ease-in-out">
              <svg class="w-4 h-4 mr-1" 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="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21H5v-7h3m4 0hത്തിനായി-3m0 0l-1.59-1.59a2 2 0 010-2.82l1.59-1.59v6z"></path></svg>
              <span class="text-sm">Like (12)</span>
            </button>
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-green-500 dark:hover:text-green-400 ml-4 transition duration-200 ease-in-out">
              <svg class="w-4 h-4 mr-1" 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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.96 9.96 0 01-5.012-1.39l-3 3v-3.032A8.96 8.96 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
              <span class="text-sm">Reply</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Comments Section Component

Component for comments section with Skeuomorphism design, triadic color scheme, complex interactions, social media purpose, responsive and dark theme support.

Open Preview

                <div
  class="container mx-auto p-4 dark:bg-gray-900 dark:text-white"
>
  <h2 class="text-2xl font-bold mb-4 dark:text-white">Comments</h2>

  <div class="mb-4">
    <textarea
      class="w-full p-2 border border-gray-300 rounded shadow-inner focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-white"
      rows="4"
      placeholder="Add a comment..."
    ></textarea>
    <button
      class="mt-2 px-4 py-2 bg-blue-500 text-white rounded shadow-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-800"
    >
      Post Comment
    </button>
  </div>

  <div class="space-y-4">
    <div
      class="bg-white p-4 rounded shadow-lg dark:bg-gray-800 dark:text-white"
    >
      <div class="flex items-center mb-2">
        <img
          class="w-10 h-10 rounded-full mr-4 shadow-md"
          src="https://randomuser.me/api/portraits/men/32.jpg"
          alt="User Avatar"
        />
        <div>
          <h4 class="font-bold dark:text-white">John Doe</h4>
          <p class="text-gray-500 text-sm dark:text-gray-400">2 hours ago</p>
        </div>
      </div>
      <p class="dark:text-white">
        This is a great comment! It provides valuable insights.
      </p>
      <div class="flex items-center mt-4 space-x-4">
        <button
          class="flex items-center text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-500"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 mr-1"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M18 13v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-5a2 2 0 012-2h3.586l1.414 1.414a.996.996 0 001.414 0L10.414 11H14a2 2 0 012 2h2zM5 9.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"
              clip-rule="evenodd"
            ></path>
          </svg>
          Like
        </button>
        <button
          class="flex items-center text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-500"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 mr-1"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5z"
              clip-rule="evenodd"
            ></path>
          </svg>
          Reply
        </button>
      </div>
    </div>

    <div
      class="bg-white p-4 rounded shadow-lg dark:bg-gray-800 dark:text-white"
    >
      <div class="flex items-center mb-2">
        <img
          class="w-10 h-10 rounded-full mr-4 shadow-md"
          src="https://randomuser.me/api/portraits/women/44.jpg"
          alt="User Avatar"
        />
        <div>
          <h4 class="font-bold dark:text-white">Jane Smith</h4>
          <p class="text-gray-500 text-sm dark:text-gray-400">1 hour ago</p>
        </div>
      </div>
      <p class="dark:text-white">
        I agree with the previous comment. This is very helpful.
      </p>
      <div class="flex items-center mt-4 space-x-4">
        <button
          class="flex items-center text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-500"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 mr-1"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M18 13v5a2 2 0 01-2 2H4a2 2 0 01-2-2v-5a2 2 0 012-2h3.586l1.414 1.414a.996.996 0 001.414 0L10.414 11H14a2 2 0 012 2h2zM5 9.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0z"
              clip-rule="evenodd"
            ></path>
          </svg>
          Like
        </button>
        <button
          class="flex items-center text-gray-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-blue-500"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5 mr-1"
            viewBox="0 0 20 20"
            fill="currentColor"
          >
            <path
              fill-rule="evenodd"
              d="M5 2a2 2 0 00-2 2v14l3.5-2 3.5 2 3.5-2 3.5 2V4a2 2 0 00-2-2H5z"
              clip-rule="evenodd"
            ></path>
          </svg>
          Reply
        </button>
      </div>
    </div>
  </div>
</div>

Comments Section Component

A responsive comments section component designed for business/corporate websites, featuring engaging animations, vibrant colors, and dark mode support.

Open Preview

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md transition-shadow duration-300 hover:shadow-xl">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Comments</h2>
    <div class="space-y-4">
        <div class="flex items-start gap-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full"> 
            <div class="flex-1">
                <div class="bg-blue-100 dark:bg-blue-500 p-4 rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105">
                    <p class="text-gray-700 dark:text-gray-200">This is a fantastic article! I learned so much.</p>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400">- John Doe</span>
            </div>
        </div>
        <div class="flex items-start gap-4">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            <div class="flex-1">
                <div class="bg-green-100 dark:bg-green-500 p-4 rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105">
                    <p class="text-gray-700 dark:text-gray-200">Great insights! Looking forward to more posts.</p>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400">- Jane Smith</span>
            </div>
        </div>
        <div class="flex items-start gap-4">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-12 h-12 rounded-full">
            <div class="flex-1">
                <div class="bg-red-100 dark:bg-red-500 p-4 rounded-lg shadow-md transition-transform duration-300 transform hover:scale-105">
                    <p class="text-gray-700 dark:text-gray-200">I completely agree with this perspective. Well said!</p>
                </div>
                <span class="text-sm text-gray-500 dark:text-gray-400">- Tom Brown</span>
            </div>
        </div>
    </div>
    <div class="mt-6">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Leave a Comment:</h3>
        <textarea class="w-full p-4 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 resize-none" rows="4" placeholder="Type your message here..."></textarea>
        <button class="mt-4 w-full bg-blue-500 text-white font-semibold py-2 rounded-lg transition-colors duration-300 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500">Submit</button>
    </div>
</div>

Comments Section

Comments Section Component with Material Design using Triadic color scheme for Business/Corporate purpose. Responsive design with dark theme support.

Open Preview

                <div class="container mx-auto p-4">
  <div class="dark:bg-gray-800 bg-white rounded-lg shadow-md p-6 mb-4">
    <h2 class="text-2xl font-bold dark:text-white text-gray-800 mb-4">Comments</h2>

    <!-- Comment 1 -->
    <div class="flex items-start space-x-4 mb-6">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
      <div class="flex-1">
        <div class="dark:bg-gray-700 bg-gray-100 rounded-lg p-3">
          <p class="font-semibold dark:text-white text-gray-800">John Doe</p>
          <p class="dark:text-gray-300 text-gray-700">This is a great article! Very insightful.</p>
        </div>
        <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
          <span>2 hours ago</span>
          <span class="ml-4 cursor-pointer hover:underline">Reply</span>
        </div>
      </div>
    </div>

    <!-- Comment 2 -->
    <div class="flex items-start space-x-4 mb-6">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
      <div class="flex-1">
        <div class="dark:bg-gray-700 bg-gray-100 rounded-lg p-3">
          <p class="font-semibold dark:text-white text-gray-800">Jane Smith</p>
          <p class="dark:text-gray-300 text-gray-700">I agree, the points are well-explained.</p>
        </div>
        <div class="mt-2 text-sm text-gray-500 dark:text-gray-400">
          <span>1 hour ago</span>
          <span class="ml-4 cursor-pointer hover:underline">Reply</span>
        </div>
      </div>
    </div>

    <!-- Add New Comment Area -->
    <div class="mt-6">
      <textarea class="w-full p-3 rounded-lg border dark:bg-gray-700 dark:border-gray-600 dark:text-white text-gray-800 dark:placeholder-gray-400 placeholder-gray-500 focus:outline-none focus:ring focus:border-blue-300" rows="4" placeholder="Add a comment..."></textarea>
      <button class="mt-3 px-6 py-2 dark:bg-blue-600 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-600 focus:outline-none focus:ring dark:focus:ring-blue-800 focus:ring-blue-300">Post Comment</button>
    </div>
  </div>
</div>

Search Components

Categories

Comments Section