Neon_Glow_Comments_Section
생생한 네온/글로우 미학을 가진 반응형 댓글 섹션 구성 요소로, 사용자 아바타, 타임스탬프 및 답장 버튼을 특징으로 합니다. 다크 모드를 지원하며 소셜 미디어 인터페이스용으로 설계되었습니다.
HTML 코드
<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 구성 요소
파스텔 색상의 브루탈리즘 스타일로 디자인된 댓글 섹션 구성 요소로, 전자 상거래 웹 사이트에 적합하며 사용자 아바타, 댓글 및 중간 수준의 상호 작용을 특징으로 합니다. 디자인은 다크 모드를 지원합니다.
Comments Section 구성 요소
스큐어모피즘(skeuomorphism)으로 디자인된 댓글 섹션은 흙색과 어두운 테마 지원을 특징으로 하며 전자 상거래 웹사이트에 맞게 조정되었습니다.