Composante de rétroaction
Un composant de retour réactif conçu selon les principes de Material Design, incorporant des tons de terre et équipé pour la prise en charge du mode sombre. Ce composant est spécialement conçu pour les tableaux de bord et comporte divers éléments interactifs.
HTML Code
<div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">User Feedback</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Feedback Item -->
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<div class="flex items-center mb-3">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3" />
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h3>
</div>
<p class="text-gray-600 dark:text-gray-300">"The new dashboard layout is intuitive and allows for quick access to data. I really appreciate the improvements!"</p>
<div class="mt-2">
<span class="text-sm font-medium text-gray-500 dark:text-gray-400">Rating: </span>
<span class="text-yellow-500 font-bold">⭐⭐⭐⭐⭐</span>
</div>
</div>
<!-- Feedback Item -->
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<div class="flex items-center mb-3">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3" />
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Jane Smith</h3>
</div>
<p class="text-gray-600 dark:text-gray-300">"Great features! However, I would like to see more customization options for the charts."</p>
<div class="mt-2">
<span class="text-sm font-medium text-gray-500 dark:text-gray-400">Rating: </span>
<span class="text-yellow-500 font-bold">⭐⭐⭐⭐</span>
</div>
</div>
</div>
<div class="mt-6">
<textarea class="w-full p-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring focus:ring-gray-300 dark:focus:ring-gray-500" rows="4" placeholder="Leave your feedback here..."></textarea>
</div>
<button class="mt-4 bg-green-500 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 text-white font-semibold py-2 px-4 rounded-lg transition duration-200">Submit Feedback</button>
</div>Composants associés
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.
Composants de rétroaction
Un composant de retour d’information complexe conçu pour les sites Web d’entreprise/d’entreprise en mode sombre, utilisant une palette de couleurs complémentaire.
Volet de rétroaction 23
Un composant de retour d’information conçu dans le style Material Design, avec des animations réactives et la prise en charge des thèmes sombres, construit avec Tailwind CSS.