Skeuomorphic Feedback Component (Simple, Earth Tones)
A simple skeuomorphic feedback component for a dashboard, using earth tones and designed to mimic real-world elements. Fully responsive with dark mode support.
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>Related Components
Feedback Component
A responsive feedback component that incorporates microinteractions with engaging animations. It is designed to support dark mode and features elements for user feedback with placeholder images and avatars.
Feedback Components Component
A complex, responsive, dark-theme supported Feedback Components Component for a dashboard, designed with a minimalist/flat aesthetic and a pastel color scheme. It displays various feedback elements such as a progress bar, status indicators, and recent activity, using only HTML with Tailwind CSS classes.
Feedback Components Component
A brutalist-style feedback component with a pastel color scheme, moderate complexity, and responsive design with dark theme support. Designed for a portfolio to showcase feedback or testimonials.