Componentes
Componentes de retroalimentación
Componente de retroalimentación esqueuomórfica (simple, tonos tierra)
Componente de retroalimentación esqueuomórfica (simple, tonos tierra)
Un componente de retroalimentación esqueuomórfico simple para un tablero, que utiliza tonos tierra y está diseñado para imitar elementos del mundo real. Totalmente receptivo con soporte para modo oscuro.
Código 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>Componentes relacionados
Componente de retroalimentación brutalista
Un componente de retroalimentación brutalista con alto contraste y tipografía audaz.
Memphis_Social_Media_Feedback_Component
Un componente de retroalimentación de redes sociales simple y receptivo con influencia de diseño de Memphis usando neutros cálidos, con un botón Me gusta y un indicador de comentario. Soporta el modo oscuro.
Componente de retroalimentación 23
Un componente de retroalimentación diseñado en el estilo Material Design, con animaciones responsivas y soporte para temas oscuros, construido con Tailwind CSS.