Composant Composants de rétroaction
Un simple composant de retour brutaliste avec des couleurs en niveaux de gris, une prise en charge du mode sombre et un design réactif.
HTML Code
<div class="max-w-md mx-auto my-8 bg-white dark:bg-gray-900 shadow-lg border-2 border-black dark:border-gray-700 p-6">
<h2 class="text-2xl font-bold text-black dark:text-white mb-4 border-b-2 border-black dark:border-gray-700 pb-2">Feedback</h2>
<div class="mb-4">
<div class="flex items-center mb-2">
<img src="https://www.randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-gray-700 mr-4">
<p class="font-bold text-black dark:text-white">John Doe</p>
</div>
<div class="bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-gray-700 p-4">
<p class="text-black dark:text-gray-300">"This article was incredibly insightful and well-written. I appreciate the clear explanations."</p>
</div>
</div>
<div class="mb-4">
<div class="flex items-center mb-2">
<img src="https://www.randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-gray-700 mr-4">
<p class="font-bold text-black dark:text-white">Jane Smith</p>
</div>
<div class="bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-gray-700 p-4">
<p class="text-black dark:text-gray-300">"I found a minor typo on page 3, but overall, a fantastic read!"</p>
</div>
</div>
<div class="text-right">
<button class="bg-black dark:bg-gray-700 text-white dark:text-gray-300 px-6 py-2 border-2 border-black dark:border-gray-700 font-bold hover:bg-gray-800 dark:hover:bg-gray-600">
Give Feedback
</button>
</div>
</div>Composants associés
Composant de rétroaction skeuomorphe (simple, tons de terre)
Un simple composant de retour d’information skeuomorphique pour un tableau de bord, utilisant des tons de terre et conçu pour imiter des éléments du monde réel. Entièrement réactif avec prise en charge du mode sombre.
Composante de rétroaction
Composant de rétroaction inspiré du skeuomorphisme avec une palette de couleurs analogue pour un tableau de bord. Conçu pour être simple, réactif et prend en charge le mode sombre à l’aide de Tailwind CSS. Utilise shadcn/ui pour améliorer le style et les composants.
Composant Composants de rétroaction
Un composant de feedback simple et réactif adapté aux sites Web de conseil/services, avec une palette de couleurs triadique et des principes de conception de micro-interaction. Inclut la prise en charge du mode sombre.