La preuve sociale est l'élément le plus persuasif de toute landing page. Les visiteurs font davantage confiance aux autres clients qu'à votre copywriting marketing. Une section témoignages bien conçue ne se contente pas d'afficher des citations — elle construit la crédibilité au moment exact où le visiteur décide s'il va convertir.
Ce guide couvre cinq patterns de témoignages en React avec Tailwind CSS : grilles de cartes, murs masonry, carrousels, témoignages vidéo et barres de logos.
1. Cartes de témoignages en grille
Le pattern le plus simple : une grille de cartes, chacune avec une citation, le nom de l'auteur, son rôle et son avatar. Trois colonnes sur desktop, une sur mobile.
interface Testimonial {
quote: string;
author: string;
role: string;
avatar: string;
company: string;
}
function TestimonialGrid({ items }: { items: Testimonial[] }) {
return (
<section className="mx-auto max-w-7xl px-6 py-24">
<h2 className="text-3xl font-bold tracking-tight text-center mb-12">
Ce que disent les développeurs
</h2>
<div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
{items.map((item) => (
<figure
key={item.author}
className="rounded-2xl border border-neutral-200 p-8 dark:border-neutral-800"
>
<blockquote className="text-neutral-600 dark:text-neutral-400">
« {item.quote} »
</blockquote>
<figcaption className="mt-6 flex items-center gap-4">
<img
src={item.avatar}
alt={item.author}
className="h-10 w-10 rounded-full"
/>
<div>
<p className="text-sm font-semibold">{item.author}</p>
<p className="text-sm text-neutral-500">
{item.role}, {item.company}
</p>
</div>
</figcaption>
</figure>
))}
</div>
</section>
);
}
Utilisez du HTML sémantique : <figure>, <blockquote> et <figcaption>. Cela aide les moteurs de recherche à comprendre la structure du contenu et améliore l'accessibilité.
Pourquoi les témoignages fonctionnent
Trois principes psychologiques alimentent les sections témoignages :
Preuve sociale : quand les gens sont incertains, ils regardent le comportement des autres. Voir que des milliers de développeurs utilisent un produit réduit le risque perçu de l'essayer.
Biais d'autorité : les témoignages de personnes dans des entreprises reconnues (ou avec des titres impressionnants) ont plus de poids. "CTO chez Stripe" est plus persuasif que "Utilisateur123".
Spécificité : "Ça nous a fait gagner 40 heures par sprint" convertit mieux que "Super produit". Plus la déclaration est spécifique, plus elle est crédible.
2. Mur de témoignages masonry
Un layout masonry crée de l'intérêt visuel parce que les cartes ont des hauteurs différentes selon la longueur des citations. Contrairement à une grille régulière où chaque cellule a la même hauteur, le masonry permet aux courtes citations de rester courtes et aux longues citations de s'étendre naturellement.
Les colonnes CSS fournissent l'implémentation masonry la plus simple :
function TestimonialWall({ items }: { items: Testimonial[] }) {
return (
<div className="columns-1 gap-6 sm:columns-2 lg:columns-3">
{items.map((item) => (
<figure
key={item.author}
className="mb-6 break-inside-avoid rounded-2xl border border-neutral-200 p-6 dark:border-neutral-800"
>
<blockquote className="text-sm text-neutral-600 dark:text-neutral-400">
« {item.quote} »
</blockquote>
<figcaption className="mt-4 flex items-center gap-3">
<img
src={item.avatar}
alt={item.author}
className="h-8 w-8 rounded-full"
/>
<div>
<p className="text-xs font-semibold">{item.author}</p>
<p className="text-xs text-neutral-500">{item.role}</p>
</div>
</figcaption>
</figure>
))}
</div>
);
}
La classe break-inside-avoid empêche les cartes d'être coupées entre les colonnes. L'approche columns-3 se lit de haut en bas dans chaque colonne, ce qui fonctionne bien pour les témoignages où l'ordre n'a pas d'importance.
3. Carrousel de témoignages
Quand vous avez 10+ témoignages mais ne voulez pas une grille massive, un carrousel permet d'en montrer trois à la fois avec navigation. Utilisez overflow-x-auto avec snap-x pour un carrousel CSS-only avec scroll snap :
function TestimonialCarousel({ items }: { items: Testimonial[] }) {
return (
<div className="relative">
<div className="flex gap-6 overflow-x-auto snap-x snap-mandatory scroll-smooth pb-4 scrollbar-hide">
{items.map((item) => (
<figure
key={item.author}
className="min-w-[300px] max-w-[350px] snap-start flex-shrink-0 rounded-2xl border border-neutral-200 p-6 dark:border-neutral-800"
>
<blockquote className="text-sm text-neutral-600 dark:text-neutral-400">
« {item.quote} »
</blockquote>
<figcaption className="mt-4 flex items-center gap-3">
<img
src={item.avatar}
alt={item.author}
className="h-8 w-8 rounded-full"
/>
<div>
<p className="text-xs font-semibold">{item.author}</p>
<p className="text-xs text-neutral-500">
{item.role}, {item.company}
</p>
</div>
</figcaption>
</figure>
))}
</div>
</div>
);
}
Les classes snap-x snap-mandatory et snap-start donnent un carrousel scroll-snap natif sans JavaScript. Sur mobile, les utilisateurs swipent ; sur desktop, ils scrollent horizontalement ou vous pouvez ajouter des boutons flèches qui appellent scrollBy sur le conteneur.
Pour une expérience plus soignée avec autoplay et gestes de glissement, enveloppez les cartes dans les contraintes de drag de Framer Motion ou utilisez embla-carousel-react.
4. Témoignages vidéo
Les témoignages vidéo sont le format le plus persuasif. Une vraie personne qui parle de son expérience est plus difficile à falsifier et porte plus de poids émotionnel que du texte.
Le pattern : une grille de vignettes, chacune avec un bouton play en overlay. Cliquer ouvre une modale avec la vidéo. Utilisez un élément <dialog> pour la modale — il gère le piégeage du focus et la fermeture par Escape nativement.
Gardez les vignettes comme des images statiques (pas de vidéos en autoplay) pour éviter les impacts de performance. Ne chargez l'<iframe> ou l'élément <video> que quand l'utilisateur clique sur play.
Pour les embeds YouTube/Vimeo, utilisez loading="lazy" et le pattern srcdoc pour différer le chargement de l'iframe jusqu'au clic :
<iframe
src={`https://www.youtube.com/embed/${videoId}?autoplay=1`}
allow="autoplay; encrypted-media"
loading="lazy"
className="aspect-video w-full rounded-xl"
/>
5. Barre de logos
La barre de logos n'est pas un témoignage au sens traditionnel, mais c'est l'un des éléments de preuve sociale les plus efficaces. Une rangée de logos clients communique la confiance en un coup d'oeil — pas besoin de lire.
Directives design : utilisez des logos monochromes (nuances de gris ou couleur unique) pour que la barre de logos ne concurrence pas votre contenu pour l'attention. Mettez les logos à opacity-50 hover:opacity-100 pour un effet interactif. Gardez tous les logos au même poids visuel en normalisant leur hauteur.
Pour une barre de logos défilante (marquee infini), dupliquez le tableau de logos et utilisez une animation CSS :
<div className="overflow-hidden">
<div className="flex animate-marquee gap-12">
{[...logos, ...logos].map((logo, i) => (
<img
key={i}
src={logo.src}
alt={logo.alt}
className="h-8 w-auto opacity-50"
/>
))}
</div>
</div>
Définissez le keyframe animate-marquee dans votre config Tailwind pour translater la rangée de 0 à -50%, créant la boucle sans couture.
Choisir le bon pattern
- 3-6 témoignages : grille de cartes. Propre, scannable, pas d'interaction requise.
- 10+ témoignages : carrousel ou mur masonry. Montre le volume sans surcharger.
- Produit haut de gamme : témoignages vidéo. La confiance supplémentaire vaut l'effort de production.
- B2B / enterprise : barre de logos + 2-3 cartes de témoignages détaillées. Les logos signalent l'échelle ; les citations ajoutent de la profondeur.
Sections témoignages pré-construites
Le catalogue témoignages d'Incubator propose 15+ sections témoignages — grilles de cartes, murs masonry, carrousels, layouts vidéo, barres de logos et patterns combinés — le tout en React avec Tailwind CSS.
Parcourez la bibliothèque de sections complète pour associer vos témoignages avec des sections CTA et du pricing pour une conversion maximale.