Payment Page - Copy this React, Tailwind Component to your project

Số trang hiện có: Văn bản "Số trang hiện có: 30": Đen. Thanh tiến trình (progress bar): Xanh lá cây. 2. Main Content (Nội dung chính) 2.1. Bảng "Chọn số trang" (bên trái) Khung bảng: Viền đen, nền trắng. Tiêu đề bảng: "Chọn số trang": Văn bản màu đen. Gạch chân bên dưới bằng đường thẳng màu đen. Hộp nhập liệu: Viền đen. Văn bản màu đen. Giá hiển thị bên cạnh ("500đ/trang"): Đen. Nút "Thanh toán": Màu nền: Xanh dương (mã màu tương tự như logo). Văn bản: Trắng. 2.2. Bảng "Phương thức thanh toán" (bên phải) Khung bảng: Viền đen, nền trắng. Tiêu đề bảng: "Phương thức thanh toán": Văn bản màu đen. Gạch chân bên dưới bằng đường thẳng màu đen. Danh sách tài khoản thanh toán: Hộp danh sách: Viền đen, nền trắng. Văn bản màu đen. Chi tiết giao dịch: Văn bản ("Số trang mua thêm", "Đơn giá", "Tổng"): Màu đen. Nút điều khiển: Nút "Thanh toán": Màu nền: Xanh dương. Văn bản: Trắng. Nút "Hủy": Màu nền: Đỏ. Văn bản: Trắng. 3. Footer (Chân trang) Thanh nền của footer: Màu xanh dương (giống nút "Thanh toán"). Văn bản bản quyền: Màu trắng. Biểu tượng mạng xã hội: Facebook: Biểu tượng màu tím/xanh tím. GitHub: Biểu tượng màu đen/trắng. 4. Tương tác người dùng (Active State) Hộp nhập liệu: Khi người dùng nhập số lượng trang, viền chuyển sang trạng thái màu xanh lam nhạt hoặc tối (tùy thuộc vào thiết lập). Danh sách tài khoản thanh toán (Dropdown): Khi nhấn vào, danh sách hiện ra với viền màu xanh lam nhạt hoặc nền sáng hơn. Nút "Thanh toán" hoặc "Hủy" khi di chuột (hover): Nút "Thanh toán": Màu nền chuyển sang xanh dương đậm hơn. Nút "Hủy": Màu nền chuyển sang đỏ đậm hơn. Tổng kết màu sắc Tông màu chủ đạo: Xanh dương, trắng, và đen – tạo cảm giác chuyên nghiệp, công nghệ. Màu phụ: Xanh lá cây (thanh tiến trình), đỏ (nút Hủy) – nhấn mạnh các điểm quan trọng. Phối hợp màu: Tự nhiên, không gây khó chịu, dễ tập trung vào nội dung chính.