Comment Card - Copy this React, Tailwind Component to your project
Hãy tạo mã HTML và CSS để hiển thị danh sách bình luận mới nhất trong một khung (card). Giao diện cần hiển thị các yếu tố sau: 1. **Tiêu đề:** 'Bình luận mới' với kích thước chữ lớn và đường viền dưới. 2. **Danh sách bình luận:** Mỗi mục trong danh sách cần hiển thị: **Tên truyện:** Liên kết đến trang truyện cụ thể. Văn bản liên kết cần được in đậm và có hiệu ứng hover gạch chân. **Thời gian bình luận:** Hiển thị thời gian bình luận đã được đăng theo định dạng ngắn gọn như '3 giờ trước'. **Ảnh đại diện:** Hiển thị ảnh đại diện của người dùng dưới dạng hình tròn có kích thước 60x60px. Nếu không có ảnh, sử dụng ảnh mặc định. **Tên người dùng:** In đậm, sử dụng phông chữ nổi bật và hiển thị cấp độ ngay bên cạnh (mức cấp độ được hiển thị với màu sắc nổi bật và có nền ảnh động). **Nội dung bình luận:** Hiển thị văn bản bình luận của người dùng. Cho phép hiện thị tối đa 2 dòng để tránh làm tràn nội dung. **Liên kết 'xem':** Hiển thị nút liên kết 'xem' ở cuối mỗi bình luận để chuyển đến chương truyện cụ thể. 3. **Hiệu ứng hình ảnh:** Sử dụng hình ảnh động nền và hiển thị một số icon trong mỗi bình luận. Đảm bảo rằng toàn bộ giao diện có nền tối và chữ trắng. Yêu cầu về CSS: Màu nền của khung cần là #151D35, các đường viền tròn và mềm mại. Sử dụng màu sắc chính cho liên kết #1d9bf0 với hiệu ứng hover chuyển đổi màu nhẹ. Văn bản chính màu trắng hoặc xám nhạt để dễ đọc trong nền tối. Tạo mã sao cho giao diện tuân thủ yêu cầu UI/UX tối ưu, thân thiện với thiết bị di động và hỗ trợ ảnh GIF nếu có.
