Componente de retroalimentación
Un componente de retroalimentación diseñado para interfaces de redes sociales, que incorpora microinteracciones y un esquema de color en escala de grises, con soporte para temas oscuros.
Código HTML
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-transform transform hover:scale-105">
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
<div>
<p class="font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">2 hours ago</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-4">This is a feedback message that users can read and respond to. It’s engaging and has small animations to enhance interaction.</p>
<div class="flex space-x-4">
<button class="text-blue-500 dark:text-blue-300 hover:underline transition-all duration-300">Like</button>
<button class="text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-all duration-300">Reply</button>
<button class="text-red-500 dark:text-red-300 hover:underline transition-all duration-300">Report</button>
</div>
</div>
<div class="p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-md mt-6">
<h2 class="font-semibold text-gray-800 dark:text-gray-200 mb-2">Leave a Comment:</h2>
<textarea class="w-full h-24 p-2 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-300 transition-all duration-300" placeholder="Write your comment..." required></textarea>
<div class="flex justify-end mt-2">
<button class="bg-blue-600 dark:bg-blue-500 text-white rounded-lg px-4 py-2 transition-all duration-300 hover:bg-blue-700 dark:hover:bg-blue-400">Submit</button>
</div>
</div>
<div class="flex justify-center mt-4">
<img src="https://picsum.photos/300/200?random=1" alt="Random Image" class="rounded-lg shadow-lg">
</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 de retroalimentación esqueuomórfica (simple, tonos tierra)
Un componente de retroalimentación esqueuomórfico simple para un tablero, que utiliza tonos tierra y está diseñado para imitar elementos del mundo real. Totalmente receptivo con soporte para modo oscuro.
Componentes de retroalimentación Componente
Componente de retroalimentación de diseño minimalista / plano para el tablero con esquema de color complementario y complejidad moderada, soporte de tema oscuro y receptivo. Utiliza HTML y Tailwind CSS. Sin JavaScript. Cuenta con elementos interactivos. Imágenes de picsum.photos y avatares de randomuser.me.