Composant Composants de rétroaction
Composant de retour d’information Glassmorphism simple pour les médias sociaux, doté d’une palette de couleurs triadique, d’un design réactif et d’une prise en charge du thème sombre. Aucun JavaScript n’est requis.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="w-full max-w-sm bg-white dark:bg-gray-800 p-6 rounded-lg shadow-xl bg-opacity-60 dark:bg-opacity-60 glassmorphism-card">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4 text-center">Leave Feedback</h2>
<textarea class="w-full p-3 mb-4 border border-gray-300 dark:border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:text-white dark:bg-gray-700 dark:placeholder-gray-400 bg-white bg-opacity-50 dark:bg-opacity-50 glassmorphism-input" rows="4" placeholder="Your feedback..."></textarea>
<button class="w-full bg-blue-500 text-white py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200 ease-in-out">Submit Feedback</button>
</div>
</div>
<style>
.glassmorphism-card {
background-color: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.dark .glassmorphism-card {
background-color: rgba(31, 41, 55, 0.6);
}
.glassmorphism-input {
background-color: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
.dark .glassmorphism-input {
background-color: rgba(55, 65, 81, 0.5);
}
</style>Composants associés
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.
Composant Composants de rétroaction
Un composant de feedback simple et réactif adapté aux sites Web de conseil/services, avec une palette de couleurs triadique et des principes de conception de micro-interaction. Inclut la prise en charge du mode sombre.
Composante de rétroaction
Il s’agit d’un composant de feedback minimaliste doté d’un design réactif, d’une prise en charge du thème sombre et de l’absence de JavaScript. Il comprend un avatar, un texte de commentaires d’utilisateur et des évaluations représentées par des étoiles.