Default Component - Copy this React, Tailwind Component to your project
Giao diện Pricing (1920px) [Toàn cảnh màn hình] Kích thước: 1920px (rộng) x 1000px (cao). Nền tổng thể: Màu xám nhạt (#F5F5F5), nhẹ nhàng, sạch sẽ. [Header Section] Vị trí: Top 0px - 150px. Nội dung: Tiêu đề "Choose Your Plan" nằm giữa, font Inter Bold 48px, màu đen (#1F2937). Dòng phụ "Tailored solutions for your team’s success" ngay dưới, font Inter Regular 18px, màu xám đậm (#4B5563). Khoảng cách giữa tiêu đề và dòng phụ: 10px. Hiệu ứng: Không có shadow, giữ tối giản. [Main Content: Pricing Cards] Vị trí: 150px - 850px, căn giữa trong khung 1200px. Cột 1: Collaboration (bên trái, cách mép trái màn hình 360px) Card: Collaboration Prime Kích thước: 550px (rộng) x 340px (cao). Nền: Trắng (#FFFFFF), shadow nhẹ (0 4px 12px rgba(0,0,0,0.1)). Góc trên phải: Hình tròn gradient xanh đậm (#1E3A8A) sang xanh nhạt (#60A5FA), đường kính 100px, opacity 0.8. Tiêu đề: "Collaboration Prime" (Inter Bold 24px, #1F2937), cạnh đó là icon ngôi sao vàng nhỏ (20px). Danh sách số liệu (cách mép trái 20px): "[Icon lịch] Meetings: 50" (Inter Regular 16px, #4B5563). "[Icon người] Representatives: 10" (Inter Regular 16px, #4B5563). "[Icon biểu đồ] Monthly Avg: 5" (Inter Regular 16px, #4B5563). "[Icon sự kiện] Event Participations: 20" (Inter Regular 16px, #4B5563). "Estimated Price: $499/mo" (Inter Bold 28px, gradient #1E3A8A -> #60A5FA). Nút: "Select Plan" (Inter Bold 16px), góc dưới phải, nền gradient #1E3A8A -> #60A5FA, border-radius 8px, padding 10px 20px. Card: Collaboration Basic (cách Prime 20px bên dưới) Kích thước: 550px (rộng) x 340px (cao). Nền: Trắng (#FFFFFF), shadow nhẹ. Góc trên phải: Đường chéo gradient xanh nhạt (#60A5FA -> #BFDBFE), dài 50px. Tiêu đề: "Collaboration Basic" (Inter Bold 24px, #1F2937). Danh sách số liệu: "[Icon lịch] Meetings: 20". "[Icon người] Representatives: 5". "[Icon biểu đồ] Monthly Avg: 4". "[Icon sự kiện] Event Participations: 10". "Estimated Price: $199/mo" (Inter Bold 28px, gradient #60A5FA -> #BFDBFE). Nút: "Select Plan", nền gradient nhạt hơn (#60A5FA -> #BFDBFE). Cột 2: Pilot (bên phải, cách cột 1 50px) Card: Pilot Prime Tương tự Collaboration Prime, nhưng: Tiêu đề: "Pilot Prime" với icon vương miện vàng nhỏ. Số liệu: "Meetings: 40", "Representatives: 8", "Monthly Avg: 5", "Event Participations: 15", "Price: $399/mo". Card: Pilot Basic Tương tự Collaboration Basic, nhưng: Số liệu: "Meetings: 15", "Representatives: 3", "Monthly Avg: 5", "Event Participations: 5", "Price: $99/mo". [Footer Section] Vị trí: 850px - 1000px. Nội dung: Nút "Get Started" nằm giữa, kích thước 200px (rộng) x 48px (cao), gradient #1E3A8A -> #60A5FA, font Inter Bold 16px, border-radius 8px. [Hiệu ứng động] Hover: Card nâng lên nhẹ (transform: scale(1.02)), shadow đậm hơn. Nút: Gradient sáng hơn khi hover. Hình dung Hãy tưởng tượng: Một màn hình rộng 1920px, nền xám nhạt, tiêu đề nổi bật ở trên. Hai cột card cân đối, mỗi cột có 2 card xếp chồng. Card Prime sang trọng với gradient đậm và icon, card Basic nhẹ nhàng hơn. Dữ liệu trong card rõ ràng với icon nhỏ, giá tiền nổi bật bằng gradient. Cuối cùng, nút lớn ở dưới kêu gọi hành động.
