Sections des fonctionnalités et de la preuve sociale
Créez une grille de fonctionnalités avec des icônes et des descriptions, suivie d’une section de témoignages avec des cartes d’avatars et des évaluations par étoiles.
Sections des fonctionnalités et de la preuve sociale est une leçon Tailwind CSS Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Tailwind CSS Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
Features Section Structure
A features section communicates the core value propositions of your product. A common pattern is a three or four column grid of feature cards, each with an icon, a short title, and a description. Above the grid, an eyebrow label and a section headline set the context. Use a light gray background bg-gray-50 to visually separate this section from the white hero.
<section class="bg-gray-50 px-4 py-24">
<div class="mx-auto max-w-7xl">
<!-- Section header -->
<div class="mb-16 text-center">
<span class="text-sm font-semibold uppercase tracking-widest text-blue-600">
Why Launchify
</span>
<h2 class="mt-2 text-3xl font-bold tracking-tight text-gray-900 md:text-4xl">
Everything you need to launch faster
</h2>
</div>
<!-- Feature grid -->
</div>
</section>Building the Feature Grid
Use CSS Grid to lay out feature cards. Start with a single column on mobile using grid grid-cols-1 and expand to three columns on large screens with lg:grid-cols-3. Add gap-8 for consistent spacing between cards. This approach ensures the feature grid looks great at every viewport width without media query gymnastics.
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
<!-- Feature card 1 -->
<div class="rounded-2xl bg-white p-8 shadow-sm">
<!-- Icon -->
<!-- Title -->
<!-- Description -->
</div>
<!-- Repeat for each feature -->
</div>Feature Card With Icon
Each feature card has an icon container, a bold title, and a supporting description. The icon sits in a colored rounded square made with flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100. The icon itself is a small SVG colored text-blue-600. The title uses mt-4 font-semibold text-gray-900 and the description uses mt-2 text-sm text-gray-500.
<div class="rounded-2xl bg-white p-8 shadow-sm transition hover:shadow-md">
<!-- Icon -->
<div class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100">
<svg class="h-6 w-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 10V3L4 14h7v7l9-11h-7z"/>
</svg>
</div>
<!-- Content -->
<h3 class="mt-4 font-semibold text-gray-900">Lightning Fast</h3>
<p class="mt-2 text-sm text-gray-500 leading-relaxed">
Deploy your product in minutes with our one-click infrastructure setup.
No DevOps expertise required.
</p>
</div>Adding Hover Effects to Cards
Interactive hover effects make feature cards feel polished. Use transition hover:shadow-md to lift the card on hover. For a more dramatic effect, add hover:-translate-y-1 to subtly raise the card. Combine with transition-all duration-200 for a smooth feel. Keep interactions subtle so they enhance without distracting from the content.
<div class="rounded-2xl bg-white p-8 shadow-sm
transition-all duration-200 hover:-translate-y-1 hover:shadow-md">
<!-- Card content -->
</div>Alternating Feature Layout
For a more editorial features section, use alternating rows where the icon/image and text swap sides. Use flex flex-col md:flex-row for each feature row, and reverse the order for even-numbered features with md:flex-row-reverse. This creates visual rhythm and prevents the layout from feeling monotonous on longer pages.
<div class="space-y-24">
<!-- Feature row 1: image left, text right -->
<div class="flex flex-col items-center gap-12 md:flex-row">
<div class="flex-1">
<img src="/feature1.png" class="rounded-2xl shadow-lg" alt="Feature">
</div>
<div class="flex-1">
<h3 class="text-2xl font-bold text-gray-900">One-click deployments</h3>
<p class="mt-4 text-gray-500">Push code, ship product. Our CI/CD pipeline handles the rest.</p>
</div>
</div>
<!-- Feature row 2: text left, image right -->
<div class="flex flex-col items-center gap-12 md:flex-row-reverse">
<!-- reversed layout -->
</div>
</div>Social Proof Section Overview
Social proof — testimonials, logos, and reviews — significantly increases conversion rates. A logo strip shows recognizable brands using your product, while a testimonials grid provides detailed endorsements. Place the logo strip directly below the hero or between the features and pricing sections for maximum impact.
<section class="px-4 py-16">
<div class="mx-auto max-w-7xl">
<!-- Logo strip -->
<p class="mb-8 text-center text-sm font-semibold text-gray-400 uppercase tracking-widest">
Trusted by teams at
</p>
<div class="flex flex-wrap items-center justify-center gap-12 opacity-60">
<!-- Company logos -->
</div>
</div>
</section>Company Logo Strip
Company logos in the trust strip should be displayed in grayscale to avoid brand color clashes with your palette. Apply grayscale opacity-60 hover:grayscale-0 hover:opacity-100 transition to let logos subtly reveal their color on hover. Keep logo height consistent with h-8 or h-6 and use object-contain to prevent distortion.
<div class="flex flex-wrap items-center justify-center gap-12">
<img
src="/logos/company-a.svg"
alt="Company A"
class="h-8 object-contain grayscale opacity-60 transition hover:grayscale-0 hover:opacity-100"
/>
<img
src="/logos/company-b.svg"
alt="Company B"
class="h-8 object-contain grayscale opacity-60 transition hover:grayscale-0 hover:opacity-100"
/>
</div>Testimonials Grid
Lay out testimonials in a masonry-like grid using CSS Grid with auto-rows-auto for unequal card heights, or keep them uniform. Each testimonial card displays a quote, star rating, avatar, name, and role. Use rounded-2xl bg-white p-6 shadow-sm as the card base — consistent with the feature cards for visual cohesion.
<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
<div class="rounded-2xl bg-white p-6 shadow-sm">
<!-- Stars -->
<div class="flex gap-1 text-yellow-400">
<span>★</span><span>★</span><span>★</span>
<span>★</span><span>★</span>
</div>
<!-- Quote -->
<p class="mt-3 text-sm text-gray-600 leading-relaxed">
'Launchify cut our deployment time from hours to minutes. Incredible product.'
</p>
<!-- Author -->
<div class="mt-4 flex items-center gap-3">
<img src="/avatar.jpg" class="h-10 w-10 rounded-full" alt="Author">
<div>
<p class="text-sm font-semibold text-gray-900">Sarah Chen</p>
<p class="text-xs text-gray-500">CTO at TechCo</p>
</div>
</div>
</div>
</div>Highlighted Testimonial
Feature one standout testimonial in a full-width highlighted block with a darker or colored background to make it visually distinct. Use bg-blue-600 text-white rounded-3xl p-12 text-center for a bold quote block. This breaks the monotony of the grid and draws the eye to your strongest social proof.
<div class="rounded-3xl bg-blue-600 p-12 text-center text-white">
<svg class="mx-auto h-10 w-10 text-blue-300" fill="currentColor" viewBox="0 0 32 32">
<!-- Quote icon -->
</svg>
<blockquote class="mt-6 text-2xl font-semibold italic">
'The best investment we made this year. Period.'
</blockquote>
<div class="mt-6 flex items-center justify-center gap-3">
<img src="/ceo.jpg" class="h-12 w-12 rounded-full ring-2 ring-blue-400" alt="CEO">
<div class="text-left">
<p class="font-semibold">James Rivera</p>
<p class="text-sm text-blue-200">CEO at Momentum Labs</p>
</div>
</div>
</div>Section Spacing and Visual Separation
Consistent section spacing prevents the page from feeling cramped or too airy. Use py-24 as a standard vertical padding for full sections and py-16 for lighter accent sections like the logo strip. Alternate background colors between sections — white, gray-50, white — to create implicit boundaries without needing borders or dividers.
<!-- Section color alternation pattern -->
<section class="bg-white px-4 py-24"><!-- Hero --></section>
<section class="bg-gray-50 px-4 py-24"><!-- Features --></section>
<section class="bg-white px-4 py-16"><!-- Logo strip --></section>
<section class="bg-blue-600 px-4 py-24"><!-- Featured quote --></section>
<section class="bg-white px-4 py-24"><!-- Testimonials grid --></section>Statistics Bar for Credibility
A row of key statistics — users, uptime, ratings — serves as social proof in a compact format. Use a three or four column grid with centered text. Each stat has a large bold number in text-4xl font-extrabold text-gray-900 and a small label below. Add a subtle top border border-t border-gray-200 to anchor the bar against the section above.
<div class="grid grid-cols-2 gap-8 border-t border-gray-200 pt-12 md:grid-cols-4">
<div class="text-center">
<p class="text-4xl font-extrabold text-gray-900">2,000+</p>
<p class="mt-1 text-sm text-gray-500">Active users</p>
</div>
<div class="text-center">
<p class="text-4xl font-extrabold text-gray-900">99.9%</p>
<p class="mt-1 text-sm text-gray-500">Uptime SLA</p>
</div>
<div class="text-center">
<p class="text-4xl font-extrabold text-gray-900">4.9/5</p>
<p class="mt-1 text-sm text-gray-500">Average rating</p>
</div>
<div class="text-center">
<p class="text-4xl font-extrabold text-gray-900"><5min</p>
<p class="mt-1 text-sm text-gray-500">Setup time</p>
</div>
</div>Quick Check
Test your understanding of Tailwind CSS Mastery concepts from this lesson.
Lesson Recap
In this lesson you learned: building a responsive feature grid with icon cards and hover effects, adding a logo strip with grayscale hover effects for social proof, and creating a testimonials section with a highlighted quote block. Next up we build the pricing table section.
Questions Fréquemment Posées
La leçon « Sections des fonctionnalités et de la preuve sociale » est-elle gratuite ?
Oui — le texte complet de « Sections des fonctionnalités et de la preuve sociale » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Tailwind CSS Academy, passe à CoddyKit PRO. Le cours Tailwind CSS Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Sections des fonctionnalités et de la preuve sociale » ?
Créez une grille de fonctionnalités avec des icônes et des descriptions, suivie d’une section de témoignages avec des cartes d’avatars et des évaluations par étoiles. Tu pratiques Tailwind CSS Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Tailwind CSS Academy ?
Aucune expérience préalable n'est requise. Tailwind CSS Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « Sections des fonctionnalités et de la preuve sociale » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Tailwind CSS Academy ?
Oui. Chaque leçon Tailwind CSS Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Section principale et navigation
- Sections des fonctionnalités et de la preuve sociale
- Section du tableau tarifaire
- Pied de page et finitions responsives