Composante de rétroaction
Un composant de retour d’information conçu pour les interfaces de médias sociaux, intégrant des micro-interactions et une palette de couleurs en niveaux de gris, avec prise en charge du thème sombre.
HTML Code
<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>
Composants associés
Composant Composants de rétroaction
Un composant de retour d’information de style brutaliste avec une palette de couleurs pastel, une complexité modérée et un design réactif avec prise en charge du thème sombre. Conçu pour un portfolio afin de présenter des commentaires ou des témoignages.
Memphis_Social_Media_Feedback_Component
Un composant de retour d’information simple et réactif sur les réseaux sociaux avec l’influence du design de Memphis en utilisant des neutres chauds, avec un bouton J’aime et un indicateur de commentaire. Prend en charge le mode sombre.
Organic_Nature_Inspired_Food_Feedback_Component
Un composant de retour d’information de complexité modérée pour les sites Web d’alimentation/restaurant, avec un design organique/inspiré de la nature avec des tons de terre et une réactivité totale, y compris la prise en charge du mode sombre.