Componente Componenti di feedback
Un semplice componente di feedback brutalista con colori in scala di grigi, supporto per la modalità oscura e design reattivo.
Codice HTML
<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>
Componenti correlati
Componente di feedback 23
Un componente di feedback progettato in stile Material Design, con animazioni reattive e supporto per temi scuri, costruito con Tailwind CSS.
Componente Componenti di feedback
Un componente Feedback Components complesso, reattivo e supportato da temi scuri per una dashboard, progettato con un'estetica minimalista/piatta e una combinazione di colori pastello. Visualizza vari elementi di feedback come una barra di avanzamento, indicatori di stato e attività recenti, utilizzando solo HTML con le classi CSS di Tailwind.
Luxury_Premium_Vibrant_Simple_Food_Restaurant_Feedback_Component
Un componente di feedback semplice ed elegante per siti Web di cibo/ristoranti con una combinazione di colori vivaci e ad alta saturazione e supporto per la modalità scura. Progettato per un'atmosfera di lusso/premium.