Feedback-Komponente
Eine reaktionsschnelle Feedback-Komponente, die Mikrointeraktionen mit ansprechenden Animationen verbindet. Es wurde entwickelt, um den Dunkelmodus zu unterstützen und verfügt über Elemente für Benutzerfeedback mit Platzhalterbildern und Avataren.
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>
Verwandte Komponenten
Feedback-Komponente
Eine Feedback-Komponente, die für Social-Media-Schnittstellen entwickelt wurde und Mikrointeraktionen und ein Graustufen-Farbschema mit Unterstützung für dunkle Themen enthält.
Komponente "Feedback-Komponenten"
Einfache Glassmorphism-Feedback-Komponente für soziale Medien mit einem triadischen Farbschema, responsivem Design und Unterstützung für dunkle Themen. Kein JavaScript erforderlich.
Feedback-Komponenten
Eine komplexe Feedback-Komponente, die für Geschäfts-/Unternehmenswebsites im Dunkelmodus entwickelt wurde und ein komplementäres Farbschema verwendet.