HTML, CSS

💼 Tailwind CSS: Tạo Thẻ Giao Diện – UI Cards, Pricing, Testimonial

Posted on by Đỗ Thành
26
Th6
View: 28

Dưới đây là phần tiếp theo trong chuỗi bài học thực chiến Tailwind CSS, tập trung vào xây dựng các UI Components phổ biến trong thiết kế giao diện web: UI Cards, Pricing Section, và Testimonial Section – tất cả đều chuẩn responsive, dễ tuỳ biến, và có thể tái sử dụng trong bất kỳ dự án nào.

✨ Mục tiêu

Bạn sẽ học cách:

  • Tạo UI Cards linh hoạt cho nhiều mục đích (bài viết, sản phẩm, dịch vụ,…)
  • Thiết kế Pricing Section thu hút, chuẩn landing page
  • Xây dựng Testimonial Section tăng độ tin cậy với người dùng
  • Áp dụng spacing, shadow, responsive, hover, font, color hiệu quả

🔹 1. UI Cards – Thẻ nội dung linh hoạt

🎯 Dùng cho: sản phẩm, bài viết, user info, tính năng,…

<div class="max-w-sm bg-white border border-gray-200 rounded-lg shadow hover:shadow-lg transition p-6">
  <img class="w-full h-40 object-cover rounded-md mb-4" src="https://source.unsplash.com/400x200/?technology" alt="Tech">
  <h5 class="text-xl font-semibold mb-2">Tăng tốc với Tailwind</h5>
  <p class="text-gray-600 text-sm mb-4">Xây dựng giao diện nhanh, nhẹ, dễ bảo trì với class utility-first.</p>
  <a href="#" class="text-blue-600 hover:underline text-sm font-medium">Xem thêm →</a>
</div>

✅ Tips:

  • Kết hợp hover, shadow, rounded, transition để tạo cảm giác nổi bật
  • Dùng max-w-sm + mx-auto để canh giữa trong bố cục grid/flex

🔹 2. Pricing Section – Bảng giá hấp dẫn

🎯 Dùng cho: dịch vụ SaaS, sản phẩm phần mềm, gói thành viên,…

<section class="bg-gray-50 py-16">
  <div class="container mx-auto px-4 text-center mb-12">
    <h2 class="text-3xl font-bold">Gói dịch vụ phù hợp với bạn</h2>
    <p class="text-gray-600 mt-2">Chọn giải pháp theo nhu cầu sử dụng của bạn.</p>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-6xl mx-auto">
    <!-- Basic -->
    <div class="bg-white border rounded-lg p-6 shadow hover:shadow-xl transition">
      <h3 class="text-xl font-semibold mb-2">Basic</h3>
      <p class="text-3xl font-bold text-blue-600 mb-4">$9<span class="text-sm font-normal">/tháng</span></p>
      <ul class="text-sm text-gray-600 mb-6 space-y-2 text-left">
        <li>✔️ 1 Dự án</li>
        <li>✔️ 100 MB dung lượng</li>
        <li>✔️ Hỗ trợ qua email</li>
      </ul>
      <button class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">Chọn gói</button>
    </div>

    <!-- Pro -->
    <div class="bg-blue-600 text-white border border-blue-600 rounded-lg p-6 shadow-lg transform scale-105">
      <h3 class="text-xl font-semibold mb-2">Pro</h3>
      <p class="text-3xl font-bold mb-4">$29<span class="text-sm font-light">/tháng</span></p>
      <ul class="text-sm mb-6 space-y-2 text-left">
        <li>✔️ Không giới hạn dự án</li>
        <li>✔️ 10 GB dung lượng</li>
        <li>✔️ Hỗ trợ ưu tiên</li>
      </ul>
      <button class="w-full bg-white text-blue-600 py-2 rounded hover:bg-gray-100">Chọn gói</button>
    </div>

    <!-- Business -->
    <div class="bg-white border rounded-lg p-6 shadow hover:shadow-xl transition">
      <h3 class="text-xl font-semibold mb-2">Business</h3>
      <p class="text-3xl font-bold text-blue-600 mb-4">$99<span class="text-sm font-normal">/tháng</span></p>
      <ul class="text-sm text-gray-600 mb-6 space-y-2 text-left">
        <li>✔️ Mọi tính năng Pro</li>
        <li>✔️ 100 GB dung lượng</li>
        <li>✔️ Hỗ trợ 24/7 qua chat</li>
      </ul>
      <button class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">Chọn gói</button>
    </div>
  </div>
</section>

✅ Tips:

  • Thẻ trung tâm (Pro) dùng scale-105 để làm nổi bật
  • Sử dụng grid để xếp hàng ngang có responsive

🔹 3. Testimonial Section – Đánh giá từ khách hàng

🎯 Dùng để: tăng độ tin tưởng, trích dẫn feedback

<section class="bg-white py-20">
  <div class="container mx-auto px-4 text-center mb-12">
    <h2 class="text-3xl font-bold">Khách hàng nói gì?</h2>
  </div>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
    <div class="bg-gray-50 p-6 rounded-lg shadow">
      <p class="text-gray-600 italic mb-4">“Tailwind giúp tôi cắt giảm 50% thời gian phát triển giao diện.”</p>
      <div class="flex items-center justify-center gap-3">
        <img src="https://i.pravatar.cc/40?img=1" alt="Avatar" class="w-10 h-10 rounded-full" />
        <div class="text-sm text-left">
          <p class="font-semibold">Trần Minh</p>
          <p class="text-gray-500">Dev tại Cty ABC</p>
        </div>
      </div>
    </div>
    <div class="bg-gray-50 p-6 rounded-lg shadow">
      <p class="text-gray-600 italic mb-4">“Code đẹp, dễ đọc, dễ mở rộng – Tailwind là chuẩn mới.”</p>
      <div class="flex items-center justify-center gap-3">
        <img src="https://i.pravatar.cc/40?img=3" alt="Avatar" class="w-10 h-10 rounded-full" />
        <div class="text-sm text-left">
          <p class="font-semibold">Nguyễn Hà</p>
          <p class="text-gray-500">UI Designer</p>
        </div>
      </div>
    </div>
    <div class="bg-gray-50 p-6 rounded-lg shadow">
      <p class="text-gray-600 italic mb-4">“Tôi đã chuyển toàn bộ dự án sang Tailwind – không hối tiếc!”</p>
      <div class="flex items-center justify-center gap-3">
        <img src="https://i.pravatar.cc/40?img=4" alt="Avatar" class="w-10 h-10 rounded-full" />
        <div class="text-sm text-left">
          <p class="font-semibold">Phạm Dũng</p>
          <p class="text-gray-500">Freelancer</p>
        </div>
      </div>
    </div>
  </div>
</section>

✅ Tips:

  • Kết hợp rounded-full và italic để tạo cảm giác thân thiện
  • Có thể mở rộng thêm carousel bằng thư viện như SwiperJS, Splide,…

✅ Kết luận

Chỉ với các class của Tailwind CSS, bạn đã có thể dựng:

  • Thẻ sản phẩm hoặc bài viết đẹp mắt
  • Bảng giá chuyên nghiệp, có trọng tâm
  • Testimonial đáng tin cậy

Tất cả đều:

  • Tương thích responsive
  • Không cần viết CSS tay
  • Tái sử dụng dễ dàng
Đỗ Thành