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.
Código HTML
<div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Your Feedback Matters!</h2>
<p class="text-gray-600 dark:text-gray-400 mb-6">We value your opinion. Please leave your feedback below!</p>
<form class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="name">Name</label>
<input id="name" type="text" placeholder="Your Name" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required />
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="email">Email</label>
<input id="email" type="email" placeholder="Your Email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required />
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="rating">Rating</label>
<select id="rating" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required>
<option value="5">⭐⭐⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="2">⭐⭐</option>
<option value="1">⭐</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="message">Message</label>
<textarea id="message" rows="4" placeholder="Your Feedback" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required></textarea>
</div>
<div>
<button type="submit" class="w-full py-2 px-4 bg-pink-500 text-white font-semibold rounded-md shadow-md hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-pink-600 dark:hover:bg-pink-700">Submit Feedback</button>
</div>
</form>
<div class="mt-6 flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
<span class="text-gray-600 dark:text-gray-400">John Doe</span>
</div>
<div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
<p>Feedback received on: <span class="text-gray-800 dark:text-gray-200">10/23/2023</span></p>
</div>
</div>Componentes relacionados
Componentes de retroalimentación Componente
Un componente de retroalimentación brutalista simple con colores en escala de grises, soporte para modo oscuro y diseño receptivo.
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.
Neon_Glow_Feedback_Component
Un componente de retroalimentación diseñado para consultoría/servicios con una estética de neón/resplandor utilizando un esquema de color análogo. Las características incluyen botones brillantes, degradados de fondo sutiles y compatibilidad con el modo oscuro.