Composante de rétroaction brutaliste
Un composant de feedback brutaliste avec un contraste élevé et une typographie audacieuse.
HTML Code
<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>Composants associés
Composant Composants de rétroaction
Il s’agit d’un composant de commentaires minimaliste conçu pour le commerce électronique, avec des couleurs pastel douces, un design réactif et la prise en charge des thèmes sombres. Le composant comprend un formulaire de commentaires avec des champs de saisie, un système d’évaluation et un bouton d’envoi, le tout stylisé avec Tailwind CSS.
Composant Composants de rétroaction
Un composant de rétroaction comprenant une échelle d’évaluation et une zone de texte pour les commentaires, avec un design réactif et une prise en charge du thème sombre.
Composante de rétroaction
Un composant de rétroaction réactif qui intègre des micro-interactions avec des animations attrayantes. Il est conçu pour prendre en charge le mode sombre et comporte des éléments pour les commentaires de l’utilisateur avec des images et des avatars de remplacement.