Feedback Component
A responsive feedback component that incorporates microinteractions with engaging animations. It is designed to support dark mode and features elements for user feedback with placeholder images and avatars.
HTML Code
<div class="flex flex-col items-center p-5 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-lg font-semibold dark:text-white mb-4">We Value Your Feedback!</h2>
<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 shadow-md">
<textarea class="ml-3 w-full h-24 p-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-shadow duration-200 ease-in-out" placeholder="Share your thoughts..."></textarea>
</div>
<div class="flex justify-between w-full">
<button class="bg-blue-600 text-white font-semibold py-2 px-4 rounded-md transition-transform transform hover:scale-105 duration-200 ease-in-out">Submit</button>
<button class="bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded-md hover:bg-gray-400 transition-colors duration-200 ease-in-out dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600">Cancel</button>
</div>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-3">Your feedback helps us improve!</p>
</div>Related Components
Vibrant_Dark_Mode_Feedback_Component
A simple, vibrant feedback component designed for entertainment/media platforms with a dark mode UI to reduce eye strain. It features a prominent title, a sub-description, and a call-to-action button, all fully responsive.
Brutalist Feedback Component
A brutalist feedback component with high contrast and bold typography.
Feedback Component
Skeuomorphism-inspired feedback component featuring an analogous color scheme for a dashboard. Designed to be simple, responsive, and supports dark mode using Tailwind CSS. Utilizes shadcn/ui for enhanced styling and components.