Componenti Componenti di feedback Componente Componenti di feedback

Componente Componenti di feedback

Un semplice componente di feedback brutalista con colori in scala di grigi, supporto per la modalità oscura e design reattivo.

Anteprima

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

Componenti di feedback

Un complesso componente di feedback progettato per siti Web aziendali/aziendali in modalità oscura, utilizzando una combinazione di colori complementare.

Aperto

Componente Componenti di feedback

Componente di feedback dal design minimalista/piatto per dashboard con combinazione di colori complementari e complessità moderata, supporto per temi reattivi e scuri. Utilizza HTML e Tailwind CSS. Niente JavaScript. Dispone di elementi interattivi. Immagini da picsum.photos e avatar da randomuser.me.

Aperto

Componente di feedback

Un componente di feedback reattivo progettato per le interfacce di social networking, che incorpora elementi di progettazione 3D in una combinazione di colori in scala di grigi con supporto per la modalità scura, su misura per media complessità e interattività.

Aperto