Bài 20: Thực hành – tạo layout card sản phẩm responsive với Tailwind CSS

Chúng ta đã đến bài 20, bài cuối cùng của Phần 2: Xây dựng layout và bố cục. Đây là lúc bạn tổng hợp toàn bộ kiến thức đã học để tạo một layout card sản phẩm hiện đại, responsive, không cần viết một dòng CSS thủ công nào.

Trong suốt 9 bài vừa qua, bạn đã học về:

• Flexbox, Grid
• Spacing (margin, padding, gap)
• Màu sắc, border, shadow, bo góc
• Vị trí phần tử (absolute, fixed, sticky)
• Thứ tự hiển thị (z-index, order)

Giờ là lúc bạn lắp ráp tất cả lại để làm một việc cực kỳ quen thuộc trong thế giới thực: hiển thị sản phẩm.

---

Mục tiêu của bài thực hành

Chúng ta sẽ tạo một card sản phẩm như sau:

• Ảnh sản phẩm ở trên (trên mobile), bên trái (trên desktop)
• Tiêu đề và mô tả ngắn
• Giá sản phẩm
• Nút “Thêm vào giỏ”
• Bo góc, shadow, spacing hợp lý
• Responsive từ sm đến lg

---

Bắt đầu layout: cấu trúc HTML

📋 Copy<div class="max-w-4xl mx-auto p-6">
  <div class="bg-white rounded-lg shadow-lg overflow-hidden flex flex-col md:flex-row">
    <!-- Ảnh sản phẩm -->
    <img src="https://via.placeholder.com/300x200" alt="Sản phẩm"
         class="w-full md:w-1/3 object-cover">

    <!-- Nội dung -->
    <div class="p-6 flex flex-col justify-between md:w-2/3">
      <div>
        <h2 class="text-2xl font-bold text-gray-800 mb-2">Tên sản phẩm</h2>
        <p class="text-gray-600 mb-4">
          Đây là mô tả ngắn gọn về sản phẩm. Thiết kế đơn giản, tinh tế và dễ sử dụng.
        </p>
      </div>
      <div class="flex items-center justify-between">
        <span class="text-xl font-semibold text-green-600">$49.99</span>
        <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition">
          Thêm vào giỏ
        </button>
      </div>
    </div>
  </div>
</div>

---

Phân tích layout

1. Bo góc và shadow

• rounded-lg: bo góc mượt
• shadow-lg: đổ bóng giúp card nổi bật
• overflow-hidden: tránh hình ảnh vượt ra ngoài card

2. Responsive layout

• flex flex-col md:flex-row: dọc trên mobile, ngang trên desktop
• md:w-1/3 và md:w-2/3: chia tỷ lệ ảnh và nội dung từ breakpoint md

3. Spacing

• p-6: padding cho nội dung
• mb-2, mb-4: khoảng cách giữa các dòng
• gap không dùng ở đây vì layout tự kiểm soát bằng margin riêng

4. Button tương tác

• hover:bg-blue-700 + transition: tạo hiệu ứng khi rê chuột
• rounded: nút mềm mại hơn

---

Mở rộng thêm nếu muốn

Bạn có thể thêm:

• Badge giảm giá với absolute và z-10
• Nút “Xem chi tiết” dưới button
• Hover ảnh zoom nhẹ với hover:scale-105 transform transition

---

Tổng kết kiến thức đã dùng

Kỹ thuật	Class sử dụng
Flex layout	flex, flex-col, md:flex-row
Width	w-full, md:w-1/3, md:w-2/3
Padding	p-6, mb-4, px-4 py-2
Shadow	shadow-lg, hover:bg-*, transition
Typography	text-2xl, font-bold, text-gray-600
Bo góc	rounded-lg, rounded
Responsive	md:*, max-w-4xl, mx-auto

---

Tóm tắt bài học

• Bạn vừa thực hành xây dựng một card sản phẩm hoàn chỉnh, chỉ bằng Tailwind CSS.
• Không có một dòng CSS truyền thống nào, nhưng vẫn tạo được layout đẹp, responsive, hiện đại.
• Đây chính là điểm mạnh lớn nhất của Tailwind: tư duy component, xây dựng nhanh, và kiểm soát chi tiết.

---

Phần tiếp theo

Bạn đã làm chủ layout. Nhưng làm giao diện đẹp thôi chưa đủ. Phần tiếp theo, chúng ta sẽ tăng tính tương tác và làm cho trang trở nên động hơn.

Phần 3 sẽ mở ra một cấp độ mới cho khả năng tạo giao diện linh hoạt và “cảm xúc” hơn!