Brutalism_Rainbow_Medical_Comments_Section
헬스케어/의료 애플리케이션을 위한 복잡하고 브루탈리즘에서 영감을 받은 댓글 섹션 구성 요소로, 생생한 무지개 그라데이션 색 구성표와 다크 모드 지원으로 완전한 응답성을 제공합니다.
HTML 코드
<section class="p-4 sm:p-8 md:p-12 min-h-screen bg-neutral-50 dark:bg-neutral-900 font-mono text-neutral-900 dark:text-neutral-50">
<!-- Brutalist Rainbow Gradient Header -->
<div class="mb-8 md:mb-12 border-4 border-neutral-900 dark:border-neutral-50 p-4 sm:p-6 md:p-8
bg-gradient-to-r from-red-500 via-yellow-500 to-green-500
dark:from-red-700 dark:via-yellow-700 dark:to-green-700
shadow-[8px_8px_0_0_rgba(0,0,0,1)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,1)]
relative overflow-hidden group">
<h1 class="text-2xl sm:text-3xl md:text-5xl lg:text-6xl font-extrabold tracking-tighter uppercase relative z-10 text-neutral-900 dark:text-neutral-50">
Patient Feedback Terminal
</h1>
<p class="text-sm sm:text-md md:text-lg mt-2 relative z-10 text-neutral-900 dark:text-neutral-50">
Comments Interface // Unauthorized Access Will Be Logged
</p>
<!-- Glitch Effect -->
<div class="absolute inset-0 bg-gradient-to-l from-blue-500 via-indigo-500 to-purple-500 dark:from-blue-700 dark:via-indigo-700 dark:to-purple-700 mix-blend-multiply opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
<!-- New Comment Submission Area -->
<div class="mb-10 p-6 sm:p-8 border-4 border-neutral-900 dark:border-neutral-50
bg-neutral-200 dark:bg-neutral-800
shadow-[6px_6px_0_0_rgba(0,0,0,1)] dark:shadow-[6px_6px_0_0_rgba(255,255,255,1)]">
<h2 class="text-xl sm:text-2xl font-bold mb-4 uppercase">Transmit New Datum</h2>
<form>
<div class="mb-4">
<label for="comment-author" class="block text-sm font-bold mb-2">ATTENDEE ID:</label>
<input type="text" id="comment-author" placeholder="[ANONYMOUS]" class="w-full p-3 border-2 border-neutral-900 dark:border-neutral-50 bg-neutral-100 dark:bg-neutral-900 text-neutral-900 dark:text-neutral-50 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400">
</div>
<div class="mb-4">
<label for="comment-text" class="block text-sm font-bold mb-2">OBSERVATION LOG:</label>
<textarea id="comment-text" rows="5" placeholder="State your findings..." class="w-full p-3 border-2 border-neutral-900 dark:border-neutral-50 bg-neutral-100 dark:bg-neutral-900 text-neutral-900 dark:text-neutral-50 focus:outline-none focus:ring-2 focus:ring-lime-500 dark:focus:ring-lime-400"></textarea>
</div>
<div class="flex flex-wrap gap-4 justify-between items-center">
<button type="submit" class="px-6 py-3
bg-gradient-to-r from-purple-500 to-indigo-500
dark:from-purple-700 dark:to-indigo-700
text-neutral-50 dark:text-neutral-900
font-bold uppercase text-lg
border-2 border-neutral-900 dark:border-neutral-50
shadow-[4px_4px_0_0_rgba(0,0,0,1)] dark:shadow-[4px_4px_0_0_rgba(255,255,255,1)]
hover:shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:hover:shadow-[2px_2px_0_0_rgba(255,255,255,1)]
transition-all duration-150 relative group overflow-hidden">
<span class="relative z-10">INITIATE TRANSMISSION</span>
<div class="absolute inset-0 bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-600 dark:to-orange-600 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</button>
<div class="flex items-center space-x-2">
<input type="checkbox" id="anonymous" class="h-5 w-5 border-2 border-neutral-900 dark:border-neutral-50 accent-red-500 dark:accent-red-700">
<label for="anonymous" class="text-sm font-bold">DESIGNATE ANONYMOUS</label>
</div>
</div>
</form>
</div>
<!-- Comments List -->
<div class="grid gap-8">
<!-- Comment 1 -->
<article class="p-6 sm:p-8
border-4 border-neutral-900 dark:border-neutral-50
bg-gradient-to-br from-cyan-200 to-blue-300 opacity-90
dark:from-cyan-800 dark:to-blue-900 dark:opacity-90
shadow-[5px_5px_0_0_rgba(0,0,0,1)] dark:shadow-[5px_5px_0_0_rgba(255,255,255,1)]
relative overflow-hidden group">
<div class="absolute top-0 right-0 p-2 text-xs font-bold bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 border-l-2 border-b-2 border-neutral-50 dark:border-neutral-900 shadow-[-2px_2px_0_0_rgba(0,0,0,0.5)] dark:shadow-[-2px_2px_0_0_rgba(255,255,255,0.5)]">STATUS: VERIFIED</div>
<div class="flex items-start mb-4 relative z-10">
<img src="https://randomuser.me/api/portraits/men/72.jpg" alt="User Avatar" class="w-16 h-16 sm:w-20 sm:h-20 border-4 border-neutral-900 dark:border-neutral-50 object-cover flex-shrink-0 mr-4 shadow-lg">
<div>
<p class="font-extrabold text-lg sm:text-xl uppercase tracking-tight">Dr. Alex "The Blade" Mercer</p>
<time datetime="2023-10-27T10:30:00Z" class="text-sm text-neutral-700 dark:text-neutral-300 italic">LOG TIMESTAMP: 2023-10-27 10:30 ZULU</time>
<div class="flex mt-2">
<span class="inline-block bg-pink-500 text-neutral-50 text-xs font-bold px-2 py-1 border border-neutral-900 dark:border-neutral-50">SURGEON</span>
<span class="inline-block bg-teal-500 text-neutral-50 text-xs font-bold px-2 py-1 ml-2 border border-neutral-900 dark:border-neutral-50">CLASSIFIED</span>
</div>
</div>
</div>
<p class="mb-4 text-md sm:text-lg leading-relaxed relative z-10">
<strong class="uppercase text-red-700 dark:text-red-300">CRITICAL ALERT:</strong> Patient vitals stabilized post-procedure, but anomalous neurological readings persist. Recommending immediate Level IV diagnostic protocol. Data logs attached to secure server. Do not disregard this warning.
</p>
<div class="flex flex-wrap gap-2 text-xs font-bold relative z-10">
<button class="px-3 py-1 bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-700 dark:to-orange-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">AGREE [001]</button>
<button class="px-3 py-1 bg-gradient-to-r from-green-500 to-lime-500 dark:from-green-700 dark:to-lime-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">DISAGREE [000]</button>
<button class="px-3 py-1 bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-700 dark:to-purple-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">REPORT [ERROR]</button>
</div>
<!-- Overlay Glitch -->
<div class="absolute inset-0 bg-gradient-to-br from-yellow-500 to-orange-500 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</article>
<!-- Comment 2 -->
<article class="p-6 sm:p-8
border-4 border-neutral-900 dark:border-neutral-50
bg-gradient-to-bl from-amber-200 to-red-300 opacity-90
dark:from-amber-800 dark:to-red-900 dark:opacity-90
shadow-[5px_5px_0_0_rgba(0,0,0,1)] dark:shadow-[5px_5px_0_0_rgba(255,255,255,1)]
relative overflow-hidden group">
<div class="absolute top-0 right-0 p-2 text-xs font-bold bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 border-l-2 border-b-2 border-neutral-50 dark:border-neutral-900 shadow-[-2px_2px_0_0_rgba(0,0,0,0.5)] dark:shadow-[-2px_2px_0_0_rgba(255,255,255,0.5)]">STATUS: PENDING</div>
<div class="flex items-start mb-4 relative z-10">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-16 h-16 sm:w-20 sm:h-20 border-4 border-neutral-900 dark:border-neutral-50 object-cover flex-shrink-0 mr-4 shadow-lg">
<div>
<p class="font-extrabold text-lg sm:text-xl uppercase tracking-tight">P.N. "Ghost" Protocol</p>
<time datetime="2023-10-27T10:45:00Z" class="text-sm text-neutral-700 dark:text-neutral-300 italic">LOG TIMESTAMP: 2023-10-27 10:45 ZULU</time>
<div class="flex mt-2">
<span class="inline-block bg-indigo-500 text-neutral-50 text-xs font-bold px-2 py-1 border border-neutral-900 dark:border-neutral-50">NURSE</span>
<span class="inline-block bg-teal-500 text-neutral-50 text-xs font-bold px-2 py-1 ml-2 border border-neutral-900 dark:border-neutral-50">OBSERVER</span>
</div>
</div>
</div>
<p class="mb-4 text-md sm:text-lg leading-relaxed relative z-10">
The patient requested an additional blanket and a glass of water at 09:30. No fever detected. Sleep patterns irregular, per monitor. Overall, stable condition, but seems a bit restless. Waiting for Dr. Mercer's follow-up.
</p>
<div class="flex flex-wrap gap-2 text-xs font-bold relative z-10">
<button class="px-3 py-1 bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-700 dark:to-orange-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">AGREE [001]</button>
<button class="px-3 py-1 bg-gradient-to-r from-green-500 to-lime-500 dark:from-green-700 dark:to-lime-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">DISAGREE [000]</button>
<button class="px-3 py-1 bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-700 dark:to-purple-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">REPORT [ERROR]</button>
</div>
<!-- Overlay Glitch -->
<div class="absolute inset-0 bg-gradient-to-bl from-green-500 to-blue-500 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</article>
<!-- Comment 3 (Anonymous) -->
<article class="p-6 sm:p-8
border-4 border-neutral-900 dark:border-neutral-50
bg-gradient-to-tr from-green-200 to-lime-300 opacity-90
dark:from-green-800 dark:to-lime-900 dark:opacity-90
shadow-[5px_5px_0_0_rgba(0,0,0,1)] dark:shadow-[5px_5px_0_0_rgba(255,255,255,1)]
relative overflow-hidden group">
<div class="absolute top-0 right-0 p-2 text-xs font-bold bg-neutral-900 dark:bg-neutral-50 text-neutral-50 dark:text-neutral-900 border-l-2 border-b-2 border-neutral-50 dark:border-neutral-900 shadow-[-2px_2px_0_0_rgba(0,0,0,0.5)] dark:shadow-[-2px_2px_0_0_rgba(255,255,255,0.5)]">STATUS: ANONYMOUS</div>
<div class="flex items-start mb-4 relative z-10">
<img src="https://picsum.photos/id/66/100/100" alt="Placeholder Avatar" class="w-16 h-16 sm:w-20 sm:h-20 border-4 border-neutral-900 dark:border-neutral-50 object-cover flex-shrink-0 mr-4 filter grayscale hue-rotate-180 brightness-50 dark:brightness-150 shadow-lg">
<div>
<p class="font-extrabold text-lg sm:text-xl uppercase tracking-tight">[DATA CORRUPTED / ANONYMOUS]</p>
<time datetime="2023-10-27T10:55:00Z" class="text-sm text-neutral-700 dark:text-neutral-300 italic">LOG TIMESTAMP: 2023-10-27 10:55 ZULU</time>
<div class="flex mt-2">
<span class="inline-block bg-purple-500 text-neutral-50 text-xs font-bold px-2 py-1 border border-neutral-900 dark:border-neutral-50">GUEST</span>
<span class="inline-block bg-teal-500 text-neutral-50 text-xs font-bold px-2 py-1 ml-2 border border-neutral-900 dark:border-neutral-50">UNIDENTIFIED</span>
</div>
</div>
</div>
<p class="mb-4 text-md sm:text-lg leading-relaxed relative z-10">
The ventilation system in Sector Gamma-7 is emitting a low-frequency hum. It's disruptive. Also, why are the lights flickering in the containment unit? Investigation recommended before structural integrity is compromised. This is not a drill.
</p>
<div class="flex flex-wrap gap-2 text-xs font-bold relative z-10">
<button class="px-3 py-1 bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-700 dark:to-orange-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">AGREE [001]</button>
<button class="px-3 py-1 bg-gradient-to-r from-green-500 to-lime-500 dark:from-green-700 dark:to-lime-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">DISAGREE [000]</button>
<button class="px-3 py-1 bg-gradient-to-r from-blue-500 to-purple-500 dark:from-blue-700 dark:to-purple-700 text-neutral-50 dark:text-neutral-900 border-2 border-neutral-900 dark:border-neutral-50 shadow-[2px_2px_0_0_rgba(0,0,0,1)] dark:shadow-[2px_2px_0_0_rgba(255,255,255,1)] hover:scale-105 transition-transform duration-100">REPORT [ERROR]</button>
</div>
<!-- Overlay Glitch -->
<div class="absolute inset-0 bg-gradient-to-tr from-cyan-500 to-fuchsia-500 mix-blend-overlay opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</article>
</div>
<!-- Brutalist Footer -->
<div class="mt-12 md:mt-16 p-4 sm:p-6 md:p-8 border-4 border-neutral-900 dark:border-neutral-50
bg-gradient-to-r from-red-500 via-yellow-500 to-green-500
dark:from-red-700 dark:via-yellow-700 dark:to-green-700
shadow-[8px_8px_0_0_rgba(0,0,0,1)] dark:shadow-[8px_8px_0_0_rgba(255,255,255,1)]
relative overflow-hidden group">
<p class="text-sm sm:text-base md:text-lg font-bold text-neutral-900 dark:text-neutral-50 relative z-10 text-center uppercase">
// END OF LOG. SYSTEM INTEGRITY: COMPROMISED //
</p>
<div class="absolute inset-0 bg-gradient-to-l from-orange-500 via-pink-500 to-purple-500 dark:from-orange-700 dark:via-pink-700 dark:to-purple-700 mix-blend-multiply opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
</div>
</section>관련 구성 요소
Comments Section 구성 요소
단색 색 구성표를 사용하여 Material Design 스타일로 디자인된 간단한 댓글 섹션 구성 요소로, 소셜 미디어 인터페이스 및 어두운 테마를 지원하는 반응형 디자인에 최적화되어 있습니다.
Comments Section 구성 요소
스큐어모피즘(skeuomorphism)으로 디자인된 댓글 섹션은 흙색과 어두운 테마 지원을 특징으로 하며 전자 상거래 웹사이트에 맞게 조정되었습니다.
Comments Section 구성 요소
레트로/빈티지 미학과 흙색으로 디자인된 간단한 댓글 섹션 구성 요소입니다. 80년대와 90년대를 연상시키는 향수를 불러일으키는 디자인이 특징이며, 소셜 미디어 인터페이스에 맞게 조정되었으며 다크 모드를 지원합니다.