CCHub Logo CCHub Tailwind Collection
구성 요소 코멘트 섹션 Neumorphic_Neon_Comments_Section

Neumorphic_Neon_Comments_Section

네온/일렉트릭 색 구성표가 있는 뉴모픽 댓글 섹션 구성 요소로, 엔터테인먼트/미디어 플랫폼용으로 설계되었습니다. 반응형 레이아웃, 다크 모드 지원 및 대화형 요소를 제공합니다. 각 댓글에는 아바타, 사용자 이름, 타임스탬프 및 댓글 텍스트가 표시되며 좋아요 및 답글 버튼이 있습니다.

미리 보기

HTML 코드 

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

관련 구성 요소

Comments Section 구성 요소

glassmorphism 디자인으로 스타일이 지정된 반응형 댓글 섹션 구성 요소로, 흐림 효과가 있는 젖빛 유리와 같은 반투명 요소와 Tailwind CSS를 사용하여 어두운 테마를 지원합니다.

열다

Comments Section 구성 요소

일몰/따뜻한 색 구성표, 마이크로 상호 작용 및 다크 모드 지원을 제공하는 간단하고 반응이 빠른 댓글 섹션 구성 요소로, 농업/농업 웹 사이트에 적합합니다.

열다

코멘트 섹션

코멘트 섹션 비즈니스/기업 목적을 위해 트라이어딕 색 구성표를 사용하는 Material Design이 있는 구성 요소. 어두운 테마를 지원하는 반응형 디자인.

열다