Composant Composants de rétroaction
Il s’agit d’un composant de commentaires minimaliste conçu pour le commerce électronique, avec des couleurs pastel douces, un design réactif et la prise en charge des thèmes sombres. Le composant comprend un formulaire de commentaires avec des champs de saisie, un système d’évaluation et un bouton d’envoi, le tout stylisé avec Tailwind CSS.
HTML Code
<div class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md dark:bg-gray-800">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Your Feedback Matters!</h2>
<p class="text-gray-600 dark:text-gray-400 mb-6">We value your opinion. Please leave your feedback below!</p>
<form class="space-y-4">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="name">Name</label>
<input id="name" type="text" placeholder="Your Name" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required />
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="email">Email</label>
<input id="email" type="email" placeholder="Your Email" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required />
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="rating">Rating</label>
<select id="rating" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required>
<option value="5">⭐⭐⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="2">⭐⭐</option>
<option value="1">⭐</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300" for="message">Message</label>
<textarea id="message" rows="4" placeholder="Your Feedback" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200" required></textarea>
</div>
<div>
<button type="submit" class="w-full py-2 px-4 bg-pink-500 text-white font-semibold rounded-md shadow-md hover:bg-pink-600 focus:outline-none focus:ring-2 focus:ring-pink-500 dark:bg-pink-600 dark:hover:bg-pink-700">Submit Feedback</button>
</div>
</form>
<div class="mt-6 flex items-center space-x-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full">
<span class="text-gray-600 dark:text-gray-400">John Doe</span>
</div>
<div class="mt-4 text-sm text-gray-500 dark:text-gray-400">
<p>Feedback received on: <span class="text-gray-800 dark:text-gray-200">10/23/2023</span></p>
</div>
</div>Composants associés
Composant Composants de rétroaction
Il s’agit d’un composant complexe inspiré de Material Design pour les plates-formes de forum/communauté, avec plusieurs éléments interactifs, une palette de couleurs complémentaire et une réactivité totale avec prise en charge du mode sombre.
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.
Composante de rétroaction
Un composant de retour d’information réactif conçu pour les interfaces de réseaux sociaux, incorporant des éléments de conception 3D dans une palette de couleurs en niveaux de gris avec prise en charge du mode sombre, adapté à la complexité moyenne et à l’interactivité.