Tailwind CSS Academy · درس

قسما الميزات وإثبات الثقة الاجتماعي

أنشئ شبكة ميزات تتضمن أيقونات ووصفًا، تليها فقرة شهادات مستخدمين تحتوي على بطاقات صور شخصية وتقييمات بالنجوم.

قسما الميزات وإثبات الثقة الاجتماعي درس مجاني في Tailwind CSS Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Tailwind CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Tailwind CSS Academy 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

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>&#9733;</span><span>&#9733;</span><span>&#9733;</span>
      <span>&#9733;</span><span>&#9733;</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">&lt;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.

الأسئلة الشائعة

هل درس «قسما الميزات وإثبات الثقة الاجتماعي» مجاني؟

نعم — نص درس «قسما الميزات وإثبات الثقة الاجتماعي» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Tailwind CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Tailwind CSS Academy 4 دروس في المجموع.

ماذا ستتعلم في «قسما الميزات وإثبات الثقة الاجتماعي»؟

أنشئ شبكة ميزات تتضمن أيقونات ووصفًا، تليها فقرة شهادات مستخدمين تحتوي على بطاقات صور شخصية وتقييمات بالنجوم. تتمرن على Tailwind CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Tailwind CSS Academy؟

لا تُشترط خبرة سابقة. Tailwind CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «قسما الميزات وإثبات الثقة الاجتماعي»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Tailwind CSS Academy هذا؟

نعم. كل درس في Tailwind CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Tailwind CSS Academy