Brutalism_Rainbow_Medical_Comments_Section
Un componente complejo de la sección de comentarios inspirado en el brutalismo para aplicaciones médicas/de atención médica, con un vibrante esquema de color degradado de arco iris y una capacidad de respuesta total con soporte para modo oscuro.
Código 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>Componentes relacionados
Componente de la sección de comentarios
Componente para la sección de comentarios con diseño de Skeuomorphism, combinación de colores triádica, interacciones complejas, propósito de redes sociales, soporte de temas oscuros y responsivos.
Sección de comentarios
Un componente de sección de comentarios responsivo y compatible con temas oscuros para comercio electrónico con diseño minimalista / plano, combinación de colores triádica y elementos de interacción complejos, construido con Tailwind CSS. Utiliza picsum.photos y randomuser.me para imágenes de demostración.
Componente de la sección de comentarios
Una sección de comentarios diseñada con skeuomorfismo, con tonos tierra y soporte para temas oscuros, adaptada a sitios web de comercio electrónico.