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
Componente de retroalimentación
Un componente de retroalimentación responsivo diseñado para el modo oscuro con colores vibrantes, ideal para el blog y el consumo de contenido.
Componente de retroalimentación
Componente de retroalimentación inspirado en el skeuomorfismo con un esquema de color análogo para un tablero. Diseñado para ser simple, receptivo y admite el modo oscuro usando Tailwind CSS. Utiliza shadcn/ui para mejorar el estilo y los componentes.
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.