Seções de recursos e prova social
Crie uma grade de recursos com ícones e descrições, seguida de uma seção de depoimentos com cartões de avatares e avaliações em estrelas.
Seções de recursos e prova social é uma aula grátis de Tailwind CSS Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Tailwind CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Tailwind CSS Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
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.
Perguntas Frequentes
A aula “Seções de recursos e prova social” é grátis?
Sim — o texto completo de “Seções de recursos e prova social” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Tailwind CSS Academy, atualize para CoddyKit PRO. O curso de Tailwind CSS Academy inclui 4 aulas no total.
O que vou aprender em “Seções de recursos e prova social”?
Crie uma grade de recursos com ícones e descrições, seguida de uma seção de depoimentos com cartões de avatares e avaliações em estrelas. Você pratica Tailwind CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Tailwind CSS Academy?
Nenhuma experiência prévia é necessária. Tailwind CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Seções de recursos e prova social”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Tailwind CSS Academy?
Sim. Cada aula de Tailwind CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Seção principal e de navegação
- Seções de recursos e prova social
- Seção de tabela de preços
- Rodapé e acabamento responsivo