CCHub Logo CCHub Tailwind Collection
Komponenten Kommentarbereich Neumorphic_Neon_Comments_Section

Neumorphic_Neon_Comments_Section

Eine neumorphe Komponente des Kommentarbereichs mit einem Neon-/Elektro-Farbschema, das für Unterhaltungs-/Medienplattformen entwickelt wurde. Verfügt über ein ansprechendes Layout, Unterstützung für den Dunkelmodus und interaktive Elemente. Jeder Kommentar zeigt einen Avatar, einen Benutzernamen, einen Zeitstempel und einen Kommentartext mit den Schaltflächen "Gefällt mir" und "Antworten" an.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Industrial_Purple_Comments_Section

Eine komplexe, reaktionsschnelle Komponente für den Kommentarbereich mit einer Industriedesign-Ästhetik und einem lila/violetten Farbschema, geeignet für Blogs oder den Konsum von Inhalten. Verfügt über freiliegende Elemente, rohes Materialgefühl und Unterstützung für den Dunkelmodus.

Offen

Neon_Glow_Comments_Section

Eine reaktionsschnelle Komponente für den Kommentarbereich mit einer lebendigen Neon-/Leuchtästhetik mit Benutzer-Avataren, Zeitstempeln und einer Antwortschaltfläche. Unterstützt den Dunkelmodus und ist für Social-Media-Schnittstellen konzipiert.

Offen

Komponente im Bereich "Kommentare"

Eine minimalistische/flache Design-Komponente für den Kommentarbereich für den E-Commerce mit lebendigen Farben, moderater Komplexität, responsivem Design und Unterstützung für dunkle Themen.

Offen