Composant Composants de rétroaction
Une section complexe et réactive de commentaires et de témoignages pour les sites Web d’entreprise, conçue avec une interface utilisateur en mode sombre et une palette de couleurs pastel. Comprend plusieurs éléments interactifs tels que des témoignages, un formulaire de contact et un affichage des évaluations.
HTML Code
<section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-900 dark:bg-gray-950 text-gray-200 dark:text-gray-100 font-sans">
<div class="max-w-7xl mx-auto">
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-12 text-blue-200 dark:text-blue-300">
What Our Clients Say
</h2>
<!-- Testimonials Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16">
<div class="bg-purple-800 dark:bg-purple-900 bg-opacity-30 dark:bg-opacity-40 rounded-xl shadow-lg p-8 flex flex-col items-center text-center transform transition-transform duration-300 hover:scale-105 hover:shadow-xl">
<img class="w-20 h-20 rounded-full mb-4 border-4 border-purple-400 dark:border-purple-300" src="https://randomuser.me/api/portraits/men/84.jpg" alt="Client Avatar">
<p class="italic text-lg mb-4 text-purple-100 dark:text-purple-200">"Their dedication to quality and innovative solutions is unparalleled. We saw significant growth after implementing their strategies."</p>
<p class="font-semibold text-purple-300 dark:text-purple-400">John Doe, CEO of InnovateCorp</p>
<div class="flex mt-2">
<svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
</div>
</div>
<div class="bg-blue-800 dark:bg-blue-900 bg-opacity-30 dark:bg-opacity-40 rounded-xl shadow-lg p-8 flex flex-col items-center text-center transform transition-transform duration-300 hover:scale-105 hover:shadow-xl">
<img class="w-20 h-20 rounded-full mb-4 border-4 border-blue-400 dark:border-blue-300" src="https://randomuser.me/api/portraits/women/6.jpg" alt="Client Avatar">
<p class="italic text-lg mb-4 text-blue-100 dark:text-blue-200">"The partnership has been incredibly smooth. Their team is highly responsive and delivered beyond our expectations."</p>
<p class="font-semibold text-blue-300 dark:text-blue-400">Jane Smith, Marketing Director at GrowthCo</p>
<div class="flex mt-2">
<svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="w-5 h-5 text-gray-600 dark:text-gray-500 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
</div>
</div>
<div class="bg-teal-800 dark:bg-teal-900 bg-opacity-30 dark:bg-opacity-40 rounded-xl shadow-lg p-8 flex flex-col items-center text-center transform transition-transform duration-300 hover:scale-105 hover:shadow-xl">
<img class="w-20 h-20 rounded-full mb-4 border-4 border-teal-400 dark:border-teal-300" src="https://randomuser.me/api/portraits/men/44.jpg" alt="Client Avatar">
<p class="italic text-lg mb-4 text-teal-100 dark:text-teal-200">"An absolute pleasure to work with. They transformed our digital presence and boosted our ROI significantly."</p>
<p class="font-semibold text-teal-300 dark:text-teal-400">David Lee, Founder of DigitalEdge</p>
<div class="flex mt-2">
<svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="w-5 h-5 text-yellow-300 dark:text-yellow-400 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
</div>
</div>
</div>
<!-- Overall Rating Section -->
<div class="bg-gray-800 dark:bg-gray-900 rounded-xl shadow-lg p-8 mb-16 text-center transform transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl">
<h3 class="text-3xl sm:text-4xl font-bold mb-4 text-pink-200 dark:text-pink-300">Overall Customer Satisfaction</h3>
<div class="flex items-center justify-center mb-4">
<span class="text-6xl font-extrabold text-pink-300 dark:text-pink-400 mr-4">4.9</span>
<div class="flex text-yellow-300 dark:text-yellow-400">
<svg class="w-10 h-10 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="w-10 h-10 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="w-10 h-10 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="w-10 h-10 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
<svg class="w-10 h-10 text-gray-600 dark:text-gray-500 fill-current ml-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
</div>
</div>
<p class="text-lg text-gray-300 dark:text-gray-400">Based on 1500+ reviews across various platforms</p>
</div>
<!-- Feedback Form -->
<div class="bg-gray-800 dark:bg-gray-900 rounded-xl shadow-lg p-8 lg:p-12 transform transition-transform duration-300 hover:scale-[1.02] hover:shadow-2xl">
<h3 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-center mb-8 text-green-200 dark:text-green-300">Share Your Experience</h3>
<form class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="md:col-span-1">
<label for="name" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Your Name</label>
<input type="text" id="name" name="name" placeholder="Enter your name" class="w-full p-3 rounded-lg bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 text-gray-200 dark:text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200">
</div>
<div class="md:col-span-1">
<label for="email" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Your Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email" class="w-full p-3 rounded-lg bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 text-gray-200 dark:text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200">
</div>
<div class="md:col-span-2">
<label for="subject" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Subject</label>
<input type="text" id="subject" name="subject" placeholder="Subject of your feedback" class="w-full p-3 rounded-lg bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 text-gray-200 dark:text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200">
</div>
<div class="md:col-span-2">
<label for="message" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Your Message</label>
<textarea id="message" name="message" rows="6" placeholder="Tell us about your experience..." class="w-full p-3 rounded-lg bg-gray-700 dark:bg-gray-800 border border-gray-600 dark:border-gray-700 text-gray-200 dark:text-gray-100 placeholder-gray-400 focus:ring-2 focus:ring-green-400 focus:border-transparent transition duration-200 resize-y"></textarea>
</div>
<div class="md:col-span-2">
<label for="rating" class="block text-sm font-medium text-gray-300 dark:text-gray-400 mb-2">Rate Us</label>
<div class="flex justify-center text-yellow-300 dark:text-yellow-400 mb-6">
<button type="button" class="rating-star outline-none focus:outline-none p-1 sm:p-2">
<svg class="w-8 h-8 sm:w-10 sm:h-10 fill-current transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
</button>
<button type="button" class="rating-star outline-none focus:outline-none p-1 sm:p-2">
<svg class="w-8 h-8 sm:w-10 sm:h-10 fill-current transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
</button>
<button type="button" class="rating-star outline-none focus:outline-none p-1 sm:p-2">
<svg class="w-8 h-8 sm:w-10 sm:h-10 fill-current transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
</button>
<button type="button" class="rating-star outline-none focus:outline-none p-1 sm:p-2">
<svg class="w-8 h-8 sm:w-10 sm:h-10 fill-current transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
</button>
<button type="button" class="rating-star current-rating outline-none focus:outline-none p-1 sm:p-2">
<svg class="w-8 h-8 sm:w-10 sm:h-10 fill-current text-gray-600 dark:text-gray-500 transition-colors duration-200" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z"/></svg>
</button>
</div>
</div>
<div class="md:col-span-2 text-center">
<button type="submit" class="px-8 py-4 bg-green-500 dark:bg-green-600 text-white font-bold rounded-lg shadow-md hover:bg-green-600 dark:hover:bg-green-700 transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-offset-2 focus:ring-offset-gray-800 dark:focus:ring-offset-gray-900">
Submit Feedback
</button>
</div>
</form>
</div>
</div>
<!-- JavaScript for Rating functionality (optional, for interactivity demonstration) -->
<script>
document.addEventListener('DOMContentLoaded', function() {
const starsContainer = document.querySelector('.rating-star').parentNode;
const stars = starsContainer.querySelectorAll('.rating-star');
stars.forEach((star, index) => {
star.addEventListener('click', () => {
// Fill stars up to the clicked one
stars.forEach((s, sIndex) => {
if (sIndex <= index) {
s.querySelector('svg').classList.remove('text-gray-600', 'dark:text-gray-500');
s.querySelector('svg').classList.add('text-yellow-300', 'dark:text-yellow-400');
} else {
s.querySelector('svg').classList.add('text-gray-600', 'dark:text-gray-500');
s.querySelector('svg').classList.remove('text-yellow-300', 'dark:text-yellow-400');
}
});
});
star.addEventListener('mouseover', () => {
stars.forEach((s, sIndex) => {
if (sIndex <= index) {
s.querySelector('svg').classList.remove('text-gray-600', 'dark:text-gray-500');
s.querySelector('svg').classList.add('text-yellow-300', 'dark:text-yellow-400');
}
});
});
star.addEventListener('mouseout', () => {
// Reset to default (or last clicked state) if no star is clicked
const currentRating = Array.from(stars).filter(s => s.querySelector('svg').classList.contains('text-yellow-300')).length || 0;
stars.forEach((s, sIndex) => {
if (sIndex < currentRating) {
s.querySelector('svg').classList.remove('text-gray-600', 'dark:text-gray-500');
s.querySelector('svg').classList.add('text-yellow-300', 'dark:text-yellow-400');
} else {
s.querySelector('svg').classList.add('text-gray-600', 'dark:text-gray-500');
s.querySelector('svg').classList.remove('text-yellow-300', 'dark:text-yellow-400');
}
});
});
});
});
</script>
</section>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.
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.
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.