Componente di feedback brutalista
Un componente di feedback brutalista con contrasto elevato e tipografia audace.
Codice HTML
<div class="bg-zinc-900 text-lime-400 p-8 max-w-sm mx-auto rounded-none shadow-xl">
<div class="flex justify-between items-start mb-4">
<h3 class="text-2xl font-bold uppercase">Feedback</h3>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-lime-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</div>
<p class="text-sm mb-6">
"This product is loud and in your face, exactly what I needed. No-nonsense and it gets the job done with aggressive efficiency."
</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-lime-400 mr-4">
<div>
<p class="text-sm font-bold uppercase">Alex "The Brutal" Johnson</p>
<p class="text-xs text-lime-400">CEO of Concrete Solutions</p>
</div>
</div>
</div>
<!-- Dark Mode -->
<div class="dark bg-lime-400 text-zinc-900 p-8 max-w-sm mx-auto rounded-none shadow-xl mt-8">
<div class="flex justify-between items-start mb-4">
<h3 class="text-2xl font-bold uppercase">Feedback</h3>
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-zinc-900" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
</svg>
</div>
<p class="text-sm mb-6">
"This product is loud and in your face, exactly what I needed. No-nonsense and it gets the job done with aggressive efficiency."
</p>
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-zinc-900 mr-4">
<div>
<p class="text-sm font-bold uppercase">Alex "The Brutal" Johnson</p>
<p class="text-xs text-zinc-900">CEO of Concrete Solutions</p>
</div>
</div>
</div>Componenti correlati
Componente di feedback scheumorfico (semplice, toni della terra)
Un semplice componente di feedback scheumorfico per un cruscotto, che utilizza i toni della terra e progettato per imitare gli elementi del mondo reale. Completamente reattivo con supporto per la modalità oscura.
Componente Componenti di feedback
Un'interfaccia utente complessa in modalità scura triadica per la sezione di feedback di una piattaforma educativa, con vari tipi di feedback ed elementi interattivi.
Neon_Glow_Feedback_Component
Un componente di feedback progettato per consulenze/servizi con un'estetica neon/bagliore utilizzando una combinazione di colori analoga. Le caratteristiche includono pulsanti luminosi, sottili sfumature di sfondo e supporto per la modalità scura.