Pizza Ordering System - Copy this React, Tailwind Component to your project
Create a user interface for an online pizza ordering system using HTML, CSS, and JavaScript that resembles the following layout: Combo Ordering System: This is a combo pizza order, where users cannot customize or modify individual pizzas within the combo. The combo includes: 'Pizza Siêu Topping Hải Sản Xốt Pesto Chanh Sả' 'Chai Fanta 1.5L' 'Pizza Thập Cẩm Thượng Hạng' Users can only add or remove the entire combo, not individual items within it. No customization of pizza toppings, sizes, or extras is allowed for the individual items. If users want to add or remove pizzas, they can only add or remove the combo in its entirety. Quantity Control for Combo: The quantity of the combo can be adjusted using '+' and '−' buttons. These buttons control the number of combos ordered, not the individual items within the combo. Cart Layout: Display the combo offer ('MUA 1 TẶNG 1 PIZZA SEAFOOD') at the top with a clear price of 343,000đ. Each combo item should display: A product image Product name Description, including dough type ('Đế Dày Bột Tươi') and size ('Size 9 inch') Any extras, such as 'Viên xúc xích 9"' for the first pizza. Next to the combo name, include an option to 'Xóa Toàn Bộ Combo,' allowing users to remove the entire combo from the cart. Promo Code Section: Below the item list, there should be a section for entering a promo code with an 'Áp Dụng' button for applying discounts. Price Summary: At the bottom of the cart, display a detailed price breakdown: Tổng (Total): 548,000đ Giảm K.Mãi (Discount): 205,000đ Giảm Vouchers (Voucher Discount): 0đ Phí Giao Hàng (Delivery Fee): 0đ Highlight the final 'Thanh Toán' (Payable) amount in red: 343,000đ. The layout should be modern, clean, and fully responsive. Emphasize that the order is combo specific, and users cannot modify or customize individual pizzas or items within the combo. All modifications must be done at the combo level.
