Componentes de retroalimentación
Un componente de retroalimentación complejo diseñado para sitios web comerciales/corporativos en modo oscuro, que utiliza un esquema de color complementario.
Código HTML
<div class="bg-gray-900 p-6 rounded-lg shadow-md dark:bg-gray-800">
<h2 class="text-2xl font-bold text-white mb-4">Feedback Component</h2>
<form class="space-y-4">
<div>
<label for="name" class="block text-gray-300 dark:text-gray-200">Name</label>
<input type="text" id="name" class="mt-1 p-2 w-full rounded-md border border-gray-700 bg-gray-800 text-gray-200 dark:bg-gray-900 dark:border-gray-600" placeholder="Your Name" required />
</div>
<div>
<label for="email" class="block text-gray-300 dark:text-gray-200">Email</label>
<input type="email" id="email" class="mt-1 p-2 w-full rounded-md border border-gray-700 bg-gray-800 text-gray-200 dark:bg-gray-900 dark:border-gray-600" placeholder="Your Email" required />
</div>
<div>
<label for="feedback" class="block text-gray-300 dark:text-gray-200">Feedback</label>
<textarea id="feedback" rows="4" class="mt-1 p-2 w-full rounded-md border border-gray-700 bg-gray-800 text-gray-200 dark:bg-gray-900 dark:border-gray-600" placeholder="Your Feedback" required></textarea>
</div>
<div class="flex items-center mb-4">
<input type="checkbox" id="subscribe" class="h-4 w-4 text-teal-500 border-gray-700 rounded dark:bg-gray-900 dark:border-gray-600" />
<label for="subscribe" class="ml-2 text-gray-300 dark:text-gray-200">Subscribe to our newsletter</label>
</div>
<button type="submit" class="w-full bg-teal-600 hover:bg-teal-500 rounded-md text-white font-semibold py-2 transition duration-200 ease-in-out">Submit</button>
</form>
<div class="mt-6">
<h3 class="text-lg font-semibold text-gray-400 dark:text-gray-300">Recent Feedback</h3>
<div class="mt-2 bg-gray-800 p-4 rounded-md shadow-md dark:bg-gray-700">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3" />
<div>
<p class="text-gray-200 dark:text-gray-100 font-bold">John Doe</p>
<p class="text-gray-300 dark:text-gray-400">Great service! Highly recommend.</p>
</div>
</div>
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3" />
<div>
<p class="text-gray-200 dark:text-gray-100 font-bold">Jane Smith</p>
<p class="text-gray-300 dark:text-gray-400">Loved the experience, will come back!</p>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componentes de retroalimentación Componente
Un componente de retroalimentación de estilo brutalista con una combinación de colores pastel, complejidad moderada y diseño receptivo con soporte para temas oscuros. Diseñado para un portafolio para mostrar comentarios o testimonios.
Componentes de retroalimentación Componente
Un componente de componentes de retroalimentación complejo, receptivo y compatible con temas oscuros para un tablero, diseñado con una estética minimalista / plana y una combinación de colores pastel. Muestra varios elementos de retroalimentación, como una barra de progreso, indicadores de estado y actividad reciente, utilizando solo HTML con clases CSS de Tailwind.
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.