PSU
Purecode Step Up

Pizza Combo Order - Copy this React, Tailwind Component to your project

Create a UI for an online pizza ordering system that reflects a combo order where customers cannot modify individual pizzas. Instead, they can only add or remove the entire combo. The UI should be developed using HTML, CSS, and JavaScript, with the following features: Combo Section: At the top, prominently display a banner for the combo offer, 'MUA 1 TẶNG 1 PIZZA SEAFOOD,' with the total combo price of 343,000đ shown clearly. Item List: The combo includes specific items: 'Pizza Siêu Topping Hải Sản Xốt Pesto Chanh Sả,' with a description of 'Đế Dày Bột Tươi,' size '9 inch,' and an extra option for 'Viên xúc xích 9" (69,000đ).' 'Chai Fanta 1.5L' as the drink. 'Pizza Thập Cẩm Thượng Hạng,' also with 'Đế Dày Bột Tươi' and 'Size 9 inch.' Each item should be displayed with an image, description, and fixed quantity of 1, but no customization options for individual pizzas (such as changing toppings or size). The user should be unable to modify, add, or remove individual pizzas within the combo. If they want to remove items, they can only remove or add the entire combo. Quantity Control for Combo: The UI should allow users to change the quantity of the whole combo (with '+' and '−' buttons), but individual pizzas and items within the combo cannot be modified or removed independently. The only action allowed is to remove or add the entire combo. Promo Code Section: Include a section where users can enter a promo code and apply it by clicking 'Áp Dụng.' Price Breakdown: The total combo price should be shown as 548,000đ, with a discount of 205,000đ applied, resulting in a final price of 343,000đ. The breakdown should include: 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đ The final 'Thanh Toán' price in bold and red: 343,000đ. The layout should be responsive and user friendly, and it should clearly emphasize that no changes can be made to individual items within the combo. The user can only modify the entire combo by adding or removing it.

Prompt
Component Preview

About

PizzaComboOrder - A responsive pizza combo UI with fixed items, promo code section, and total price breakdown, built with react and ta. Download code free!

Share

Last updated 1 month ago