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.
HTML Code
<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>Composants associés
Composante de rétroaction
Un composant de retour d’information réactif conçu pour les interfaces de réseaux sociaux, incorporant des éléments de conception 3D dans une palette de couleurs en niveaux de gris avec prise en charge du mode sombre, adapté à la complexité moyenne et à l’interactivité.
Composante de rétroaction
Un composant de feedback réactif conçu pour le mode sombre avec des couleurs vives, idéal pour la consommation de blogs et de contenu.
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.