Componentes de retroalimentación Componente
Un componente de retroalimentación con una escala de calificación y un área de texto para comentarios, con diseño responsivo y soporte para temas oscuros.
Código HTML
<div class="container mx-auto p-4 md:p-8 bg-gray-100 dark:bg-gray-800 shadow-lg rounded-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Leave Feedback</h2>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="rating">
Overall Rating
</label>
<div class="flex items-center">
<input type="radio" name="rating" id="rating-5" class="hidden" value="5" />
<label for="rating-5" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
<input type="radio" name="rating" id="rating-4" class="hidden" value="4" />
<label for="rating-4" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
<input type="radio" name="rating" id="rating-3" class="hidden" value="3" />
<label for="rating-3" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
<input type="radio" name="rating" id="rating-2" class="hidden" value="2" />
<label for="rating-2" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
<input type="radio" name="rating" id="rating-1" class="hidden" value="1" />
<label for="rating-1" class="text-3xl text-gray-400 dark:text-gray-600 cursor-pointer select-none hover:text-yellow-500 dark:hover:text-yellow-500 transition-colors duration-200">★</label>
</div>
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="comment">
Your Feedback
</label>
<textarea id="comment" name="comment" rows="4" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-white dark:bg-gray-700 dark:border-gray-600" placeholder="Tell us about your experience..."></textarea>
</div>
<div class="flex items-center justify-between">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-blue-700 dark:hover:bg-blue-900" type="button">
Submit Feedback
</button>
</div>
</div>Componentes relacionados
Componente de comentarios para organizaciones sin fines de lucro (estilo 3D)
Un componente de retroalimentación simple y receptivo para organizaciones sin fines de lucro, con una estética de diseño 3D y tonos cálidos del atardecer. Incluye soporte para modo oscuro.
Componentes de retroalimentación Componente
Componente de retroalimentación de Glassmorphism simple para redes sociales, con un esquema de color triádico, diseño receptivo y soporte para temas oscuros. No se requiere JavaScript.
Organic_Nature_Inspired_Food_Feedback_Component
Un componente de retroalimentación de complejidad moderada para sitios web de alimentos/restaurantes, con un diseño orgánico/inspirado en la naturaleza con tonos tierra y capacidad de respuesta completa, incluida la compatibilidad con el modo oscuro.