Giới Thiệu

Bài viết này sẽ hướng dẫn bạn cách tạo ra một giao diện chi tiết sản phẩm responsive, đẹp mắt trên mọi kích thước màn hình bằng cách sử dụng Tailwind CSS. Chúng ta sẽ phân chia bố cục thành hai phần chính: cột bên trái hiển thị hình ảnh sản phẩm và cột bên phải cung cấp thông tin chi tiết về sản phẩm.

Mục Tiêu

Mục tiêu của hướng dẫn này là giúp bạn có thể xây dựng một giao diện hiển thị sản phẩm hấp dẫn, dễ sử dụng và tương thích với tất cả các thiết bị.

Cách Bố Trí Giao Diện

Bắt đầu với việc thiết lập khung lưới tổng quan cho giao diện bằng cách sử dụng Tailwind CSS:

<div class="grid items-start grid-cols-1 lg:grid-cols-2 gap-8 max-lg:gap-12 max-sm:gap-8">

Trong đoạn mã này:

• grid: Sử dụng CSS Grid để sắp xếp nội dung một cách hợp lý.
• lg:grid-cols-2: Hiển thị hai cột khi màn hình lớn.
• gap-8, max-lg:gap-12, max-sm:gap-8: Kiểm soát khoảng cách giữa các mục lưới qua các điểm ngắt.

Thư Viện Hình Ảnh

Để hiển thị hình ảnh sản phẩm, chúng ta sẽ sử dụng mã sau:

<div class="flex flex-row gap-2">
  <div class="flex flex-col gap-2 w-16 max-sm:w-14 shrink-0">
    <!-- Hình ảnh thu nhỏ -->
  </div>
  <div class="flex-1">
    <!-- Hình ảnh chính sản phẩm -->
  </div>
</div>

Hình Ảnh Thu Nhỏ

Phần này sẽ hiển thị danh sách dọc các hình ảnh nhỏ:

• aspect-[64/85] object-cover: Đảm bảo tỷ lệ khung hình của hình ảnh được duy trì trong khi che phủ vùng chứa.

Hình Ảnh Chính

Hiển thị hình ảnh phóng to của sản phẩm đã chọn:

• aspect-[548/712]: Giúp duy trì tỷ lệ khung hình tối ưu cho hình ảnh chính.

Mô Tả Sản Phẩm

Mô tả chi tiết về sản phẩm:

<h3 class="text-lg sm:text-xl font-bold text-gray-800">Áo Dài Thêu Cho Nữ</h3>
<p class="text-gray-500 mt-1 text-sm">Áo Dài Thêu Georgette A-line với Dupatta đính kèm (Màu Đỏ)</p>

Phần Định Giá

Hiển thị giá sản phẩm:

<div class="flex items-center flex-wrap gap-4 mt-4">
  <h4 class="text-gray-800 text-2xl sm:text-3xl font-bold">$12</h4>
  <p class="text-gray-500 text-lg"><strike>$16</strike> <span class="text-sm ml-1.5">Đã bao gồm thuế</span></p>
</div>

Đánh Giá Sản Phẩm

Hiển thị đánh giá và xếp hạng sản phẩm:

<div class="flex items-center gap-1 text-lg px-2.5 bg-green-600 text-white rounded-full">
  <p>4</p>
  <svg>...</svg>
</div>

Tùy Chọn Kích Thước

Các nút để chọn kích thước sản phẩm:

<div class="flex flex-wrap gap-4 mt-4">
  <button type="button" class="w-10 h-9 border">SM</button>
  <button type="button" class="w-10 h-9 border">MD</button>
</div>

Nút Hành Động

Các nút cho hành động thêm sản phẩm vào danh sách mong muốn hoặc giỏ hàng:

<div class="mt-6 flex flex-wrap gap-4">
  <button type="button" class="px-4 py-3 w-[45%]">Thêm vào danh sách mong muốn</button>
  <button type="button" class="px-4 py-3 w-[45%]">Thêm vào giỏ hàng</button>
</div>

Địa Điểm Giao Hàng

Cung cấp cho người dùng chức năng nhập mã PIN để kiểm tra tình trạng giao hàng:

<div class='flex items-center gap-2 mt-4 max-w-sm'>
  <input type='number' placeholder='Nhập mã PIN' class='bg-gray-100' />
  <button type='button' class='bg-blue-600 hover:bg-blue-700'>Áp dụng</button>
</div>

Accordion Cho Thông Tin Sản Phẩm

Triển khai một accordion có thể thu gọn để cung cấp thêm thông tin chi tiết về sản phẩm:

<div role="accordion">
  <button type="button" class="w-full text-sm">Chi tiết sản phẩm</button>
  <div class="pb-4 px-4 hidden">
    <p class="text-sm text-gray-500">Thông tin chi tiết về sản phẩm...</p>
  </div>
</div>

Thiết Kế Responsive

Sử dụng các lớp tiện ích như max-lg, max-sm và lg:grid-cols-2 để đảm bảo bố cục đáp ứng tốt trên các kích thước màn hình khác nhau.

Kết Luận

Chúc mừng bạn đã hoàn thành việc xây dựng giao diện chi tiết sản phẩm responsive với Tailwind CSS! Hy vọng rằng bài viết này mang lại cho bạn những kiến thức hữu ích để áp dụng trong dự án của mình.