Xây dựng giao diện chi tiết sản phẩm responsive với Tailwind CSS
Bài viết này hướng dẫn cách xây dựng 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 Tailwind CSS. Chúng ta sẽ phân chia bố cục thành hai phần bằng grid: cột trái hiển thị ảnh sản phẩm và cột phải chứa thông tin chi tiết.
Xin chào các bạn! Hôm nay, chúng ta sẽ cùng tìm hiểu cách tạo ra một bố cục hiển thị chi tiết sản phẩm, có khả năng tự động điều chỉnh theo kích thước màn hình (responsive) bằng Tailwind CSS.
Bố cục này sẽ được chia thành hai phần chính sử dụng grid: một cột bên trái dành cho hình ảnh sản phẩm và cột bên phải để hiển thị thông tin chi tiết. Mục tiêu là đảm bảo giao diện hiển thị tốt trên tất cả các thiết bị.
Ví dụ sẽ giống như trong ảnh dưới đây. Hãy cùng bắt đầu nhé!
Cách trình bày
Chúng ta bắt đầu với việc thiết lập khung lưới tổng quan cho giao diện.
<div class="grid items-start grid-cols-1 lg:grid-cols-2 gap-8 max-lg:gap-12 max-sm:gap-8">
Trong đó:
grid: Sử dụng CSS Grid để sắp xếp nội dung.lg:grid-cols-2: Hiển thị hai cột trên 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
Sử dụng đoạn code sau:
<div class="flex flex-row gap-2">
<div class="flex flex-col gap-2 w-16 max-sm:w-14 shrink-0">
<!-- Thumbnail Images -->
</div>
<div class="flex-1">
<!-- Main Product Image -->
</div>
</div>
Trong đó:
Hình ảnh thu nhỏ:
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:
Phóng to hình ảnh sản phẩm đã chọn.
aspect-[548/712]: Duy trì tỷ lệ khung hình cao hơn.
Mô tả sản phẩm
<h3 class="text-lg sm:text-xl font-bold text-gray-800">Women Embroidered A-line Kurta</h3>
<p class="text-gray-500 mt-1 text-sm">Women Embroidered Georgette A-line Kurta With Attached Dupatta (Maroon)</p>
Hiển thị tiêu đề và mô tả sản phẩm.
Phần định giá
<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">Tax included</span></p>
</div>
Hiển thị giá đã giảm, giá gốc (gạch ngang) và thông tin thuế.
flex flex-wrap gap-4: Sắp xếp chi tiết giá theo chiều ngang.
Phần đánh giá
<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>
Hiển thị xếp hạng và đánh giá của sản phẩm.
rounded-full: Định dạng điểm xếp hạng dưới dạng phần tử hình viên thuốc.
Tùy chọn kích thước
<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>
Cung cấp các nút để chọn kích thước.
Nút hành động
<div class="mt-6 flex flex-wrap gap-4">
<button type="button" class="px-4 py-3 w-[45%] ...">Add to wishlist</button>
<button type="button" class="px-4 py-3 w-[45%] ...">Add to cart</button>
</div>
Bao gồm các nút "Thêm vào danh sách mong muốn" và "Thêm vào giỏ hàng" với nhiều kiểu dáng riêng biệt.
Địa điểm giao hàng
<div class='flex items-center gap-2 mt-4 max-w-sm'>
<input type='number' placeholder='Enter pincode' class='bg-gray-100 ...' />
<button type='button' class='bg-blue-600 hover:bg-blue-700 ...'>Apply</button>
</div>
Cung cấp trường nhập liệu và nút để nhập mã PIN nhằm kiểm tra tình trạng giao hàng.
Accordion cho thông tin sản phẩm
<div role="accordion">
<button type="button" class="w-full text-sm ...">Product details</button>
<div class="pb-4 px-4 hidden">
<p class="text-sm text-gray-500">Lorem ipsum...</p>
</div>
</div>
Triển khai một chiếc đàn accordion có thể thu gọn để cung cấp thêm thông tin chi tiết về sản phẩm.
Thiết kế đáp ứng 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 có thể điều chỉnh theo các kích thước màn hình khác nhau.
Như vậy là đã hoàn thành rồi, cảm ơn các bạn đã theo dõi!
All Rights Reserved
