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.
Codice HTML
<div class="p-4 md:p-6 lg:p-8 bg-gradient-to-br from-stone-200 to-stone-300 dark:from-stone-800 dark:to-stone-900 min-h-screen flex items-center justify-center font-sans">
<div class="w-full max-w-sm mx-auto p-6 rounded-3xl shadow-xl bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-700 dark:to-stone-800
border border-stone-300 dark:border-stone-900
transform transition-all duration-300">
<div class="flex items-center space-x-4 mb-6">
<div class="relative w-16 h-16 rounded-full bg-stone-300 dark:bg-stone-600 shadow-md
flex items-center justify-center p-0.5 border border-stone-400 dark:border-stone-500">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar" class="w-full h-full rounded-full object-cover
shadow-inner border border-stone-200 dark:border-stone-700">
<span class="absolute bottom-0 right-0 w-4 h-4 bg-lime-500 rounded-full border-2 border-white dark:border-stone-800 shadow-sm"></span>
</div>
<div class="flex-1">
<h3 class="text-lg font-semibold text-stone-800 dark:text-stone-200">John Doe</h3>
<p class="text-sm text-stone-600 dark:text-stone-400">Product Manager</p>
</div>
</div>
<div class="mb-6">
<label for="feedback-text" class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Your Feedback</label>
<textarea id="feedback-text" rows="4" class="w-full px-4 py-3 rounded-xl
bg-stone-50 dark:bg-stone-900 text-stone-800 dark:text-stone-200
shadow-inner border border-stone-200 dark:border-stone-700
focus:ring-2 focus:ring-amber-500 focus:border-amber-500
placeholder-stone-400 dark:placeholder-stone-500
transition-all duration-200 resize-none
transform focus:scale-[1.01]
focus:shadow-md"
placeholder="Share your thoughts..."></textarea>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-stone-700 dark:text-stone-300 mb-2">Rating</label>
<div class="flex items-center justify-center space-x-2">
<!-- Star 1 -->
<button class="p-2 rounded-full cursor-pointer group
bg-stone-200 dark:bg-stone-700 shadow-md
border border-stone-300 dark:border-stone-600
hover:bg-amber-100 hover:dark:bg-amber-600 hover:shadow-lg
active:bg-amber-200 active:dark:bg-amber-700 active:shadow-inner active:scale-95
transition-all duration-150">
<svg class="w-6 h-6 text-amber-400 dark:text-amber-500 group-hover:text-amber-500 group-dark:hover:text-amber-300" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
</button>
<!-- Star 2 -->
<button class="p-2 rounded-full cursor-pointer group
bg-stone-200 dark:bg-stone-700 shadow-md
border border-stone-300 dark:border-stone-600
hover:bg-amber-100 hover:dark:bg-amber-600 hover:shadow-lg
active:bg-amber-200 active:dark:bg-amber-700 active:shadow-inner active:scale-95
transition-all duration-150">
<svg class="w-6 h-6 text-amber-400 dark:text-amber-500 group-hover:text-amber-500 group-dark:hover:text-amber-300" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
</button>
<!-- Star 3 -->
<button class="p-2 rounded-full cursor-pointer group
bg-stone-200 dark:bg-stone-700 shadow-md
border border-stone-300 dark:border-stone-600
hover:bg-amber-100 hover:dark:bg-amber-600 hover:shadow-lg
active:bg-amber-200 active:dark:bg-amber-700 active:shadow-inner active:scale-95
transition-all duration-150">
<svg class="w-6 h-6 text-amber-400 dark:text-amber-500 group-hover:text-amber-500 group-dark:hover:text-amber-300" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
</button>
<!-- Star 4 -->
<button class="p-2 rounded-full cursor-pointer group
bg-stone-200 dark:bg-stone-700 shadow-md
border border-stone-300 dark:border-stone-600
hover:bg-amber-100 hover:dark:bg-amber-600 hover:shadow-lg
active:bg-amber-200 active:dark:bg-amber-700 active:shadow-inner active:scale-95
transition-all duration-150">
<svg class="w-6 h-6 text-amber-400 dark:text-amber-500 group-hover:text-amber-500 group-dark:hover:text-amber-300" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
</button>
<!-- Star 5 -->
<button class="p-2 rounded-full cursor-pointer group
bg-stone-200 dark:bg-stone-700 shadow-md
border border-stone-300 dark:border-stone-600
hover:bg-amber-100 hover:dark:bg-amber-600 hover:shadow-lg
active:bg-amber-200 active:dark:bg-amber-700 active:shadow-inner active:scale-95
transition-all duration-150">
<svg class="w-6 h-6 text-stone-400 dark:text-stone-500 group-hover:text-amber-500 group-dark:hover:text-amber-300" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
</button>
</div>
</div>
<div class="flex justify-end space-x-3">
<button class="px-6 py-3 rounded-xl font-medium
bg-stone-200 dark:bg-stone-700 text-stone-700 dark:text-stone-300
shadow-md border border-stone-300 dark:border-stone-600
hover:bg-stone-300 hover:dark:bg-stone-600 hover:shadow-lg
active:bg-stone-400 active:dark:bg-stone-800 active:shadow-inner active:scale-95
transition-all duration-150">
Cancel
</button>
<button class="px-6 py-3 rounded-xl font-medium
bg-amber-600 dark:bg-amber-700 text-white
shadow-md border border-amber-700 dark:border-amber-800
hover:bg-amber-700 hover:dark:bg-amber-600 hover:shadow-lg
active:bg-amber-800 active:dark:bg-amber-900 active:shadow-inner active:scale-95
transition-all duration-150">
Submit
</button>
</div>
</div>
</div>Componenti correlati
Componente Componenti di feedback
Un componente di feedback in stile brutalista con una combinazione di colori pastello, complessità moderata e design reattivo con supporto per temi scuri. Progettato per un portfolio per mostrare feedback o testimonianze.
Componente di feedback senza scopo di lucro (stile 3D)
Un componente di feedback semplice e reattivo per le organizzazioni non profit, caratterizzato da un'estetica di design 3D e dai toni caldi del tramonto. Include il supporto per la modalità oscura.
Componente di feedback
Un componente di feedback minimalista con design reattivo, supporto per temi scuri e assenza di JavaScript. Include un avatar, un testo di feedback dell'utente e valutazioni rappresentate da stelle.