Đăng nhập Đăng ký

Tuyệt vời! Dưới đây là mã HTML sử dụng Tailwind CSS để tạo trang FAQ theo yêu cầu của bạn, với phong cách năng động và màu chủ đạo bạn đã cung cấp. **Giải thích các điểm chính và Tailwind classes:** 1. **Màu sắc và Phong cách Năng động:** * `bg-gradient-to-br from-red-700 via-red-500 to-red-600`: Tạo nền gradient màu đỏ chủ đạo cho toàn trang, mang lại cảm giác năng động. * `font-sans`: Sử dụng font sans-serif cơ bản, hiện đại. * `rounded-xl shadow-2xl`: Bo góc lớn và đổ bóng mạnh cho các thẻ câu hỏi, tạo hiệu ứng nổi bật và hiện đại. * `bg-red-600 text-white`: Phần tiêu đề câu hỏi sử dụng màu nền đỏ đậm và chữ trắng để làm nổi bật. * `border-2 border-red-200`: Thêm viền nhẹ màu đỏ nhạt cho avatar. * `text-red-700`: Tên người dùng có màu đỏ. 2. **Cấu trúc Card Câu hỏi:** * Mỗi câu hỏi (`.question-card`) là một `div` với nền trắng (`bg-white`), bo góc (`rounded-xl`), và đổ bóng (`shadow-2xl`). * Tiêu đề câu hỏi (`h2`) được làm nổi bật. * Phần trả lời (`.answers-list`) có padding và khoảng cách giữa các câu trả lời (`space-y-5`). 3. **Hiển thị Câu trả lời:** * Mỗi câu trả lời (`.answer-item`) sử dụng `flex` để sắp xếp avatar bên trái và nội dung bên phải. * `img`: Avatar được bo tròn (`rounded-full`), `object-cover` để ảnh không bị méo, `flex-shrink-0` để avatar không bị co lại khi nội dung dài. * `flex-grow`: Phần nội dung sẽ chiếm hết không gian còn lại. * **Kiểu Bong bóng Chat:** * `bg-gray-100 p-3 rounded-lg shadow-sm`: Phần nội dung câu trả lời có nền xám nhạt, padding, bo góc và bóng nhẹ, tạo cảm giác như một bong bóng chat. * Tên người dùng (`font-semibold text-red-700 text-sm`), nội dung trả lời (`text-gray-800 text-sm`), và thời gian đăng (`text-xs text-gray-500 text-right`) được định dạng rõ ràng. 4. **"Xem thêm câu trả lời":** * Các câu trả lời thừa (`.answer-item.hidden`) ban đầu được ẩn bằng class `hidden` của Tailwind. * Nút "Xem thêm" (`.view-more-btn`): * `text-red-600 hover:text-red-700`: Màu chữ và hiệu ứng hover. * `transition-colors duration-200`: Hiệu ứng chuyển màu mượt mà. * `focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2`: Cải thiện khả năng truy cập khi dùng bàn phím. * **JavaScript:** * Đoạn script nhỏ được thêm vào cuối để xử lý logic hiển thị/ẩn các câu trả lời. * Nó sẽ đếm số câu trả lời, ẩn đi những câu trả lời sau 2 (hoặc 3) câu đầu tiên. * Khi nhấp vào nút "Xem thêm", nó sẽ bật/tắt class `hidden` cho các câu trả lời đó và cập nhật nội dung của nút. * Thêm một đoạn script nhỏ để định dạng lại ngày tháng từ "YYYY-MM-DD HH:MM:SS" thành "HH:MM DD/MM/YYYY" cho dễ đọc hơn. 5. **Tính Thân thiện với Di động (Mobile-Friendly):** * Tailwind CSS là mobile-first, nên các class như `p-4`, `text-lg` sẽ áp dụng cho màn hình nhỏ nhất. * Sử dụng các tiền tố `sm:`, `md:` (ví dụ `sm:p-5`, `sm:text-xl`) để điều chỉnh giao diện cho các màn hình lớn hơn. * `max-w-3xl mx-auto`: Giới hạn chiều rộng tối đa của nội dung và căn giữa, giúp dễ đọc trên màn hình lớn. * Kích thước avatar (`w-10 h-10 sm:w-12 sm:h-12`) cũng được điều chỉnh cho các kích thước màn hình khác nhau. **Để sử dụng:** 1. Đảm bảo bạn đã cài đặt và cấu hình Tailwind CSS trong dự án của mình. 2. Sao chép đoạn mã HTML này vào tệp của bạn. 3. Bạn có thể dễ dàng thay đổi dữ liệu câu hỏi và câu trả lời trực tiếp trong HTML hoặc sử dụng một template engine nếu bạn lấy dữ liệu từ backend. Trang FAQ này sẽ trông hiện đại, năng động và hoạt động tốt trên các thiết bị di động.