Componente de retroalimentación
Un componente de retroalimentación receptivo diseñado con los principios de Material Design, incorporando tonos tierra y equipado para soporte de modo oscuro. Este componente está diseñado específicamente para paneles y cuenta con varios elementos interactivos.
Código HTML
<div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">User Feedback</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Feedback Item -->
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<div class="flex items-center mb-3">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3" />
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
</div>
<p class="text-gray-600 dark:text-gray-300">"The new dashboard layout is intuitive and allows for quick access to data. I really appreciate the improvements!"</p>
<div class="mt-2">
<span class="text-sm font-medium text-gray-500 dark:text-gray-400">Rating: </span>
<span class="text-yellow-500 font-bold">⭐⭐⭐⭐⭐</span>
</div>
</div>
<!-- Feedback Item -->
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<div class="flex items-center mb-3">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3" />
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
</div>
<p class="text-gray-600 dark:text-gray-300">"Great features! However, I would like to see more customization options for the charts."</p>
<div class="mt-2">
<span class="text-sm font-medium text-gray-500 dark:text-gray-400">Rating: </span>
<span class="text-yellow-500 font-bold">⭐⭐⭐⭐</span>
</div>
</div>
</div>
<div class="mt-6">
<textarea class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-300 dark:focus:ring-gray-500" rows="4" placeholder="Leave your feedback here..."></textarea>
</div>
<button class="mt-4 bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">Submit Feedback</button>
</div>Componentes relacionados
Componentes de retroalimentación Componente
Un componente de retroalimentación minimalista diseñado para el comercio electrónico, con colores pastel suaves, diseño receptivo y soporte para temas oscuros. El componente incluye un formulario de comentarios con campos de entrada, un sistema de calificación y un botón de envío, todo diseñado con Tailwind CSS.
Componente OrganicNatureFeedback
Un componente de retroalimentación complejo inspirado en la naturaleza diseñado para sitios web de juegos, con líneas fluidas, neutros fríos y capacidad de respuesta total con soporte para modo oscuro.
OrganicNatureInspiredFeedbackComponent
Un componente de retroalimentación de complejidad moderada para sitios web de noticias/periodismo, con un diseño orgánico/inspirado en la naturaleza. Utiliza un esquema de color en blanco y negro con un acento brillante, es totalmente receptivo y admite el modo oscuro.