Invoice - Copy this React, Tailwind Component to your project
Design an invoice screen for a web application with the following features: Header Section: Prominently display the company logo. Include the invoice title (e.g., "Invoice" or "Billing Statement"). Provide fields for invoice number (e.g., "Invoice #12345") and date (e.g., "Date: [MM/DD/YYYY]"). Customer Information Section: Add input fields for: Customer name (text input). Customer address (multi line text input). Contact number (text input). Email address (text input). Itemized List Section: Create a table with columns for: Item description (text input). Quantity (numeric input). Unit price (numeric input). Total price (automatically calculated). Include a button to add more items. Provide an option to remove items from the list. Summary Section: Display fields for: Subtotal (automatically calculated). Tax (input field with percentage). Total amount (automatically calculated). Payment Details Section: Include input fields for payment method (e.g., credit card, PayPal). Provide fields to enter payment details (e.g., credit card number, expiration date). Notes and Terms Section: Add a text area for additional notes or terms and conditions related to the invoice. Action Buttons: "Save Invoice" button to save the invoice as a draft. "Send Invoice" button to email the invoice to the customer. "Print Invoice" button to print the invoice directly from the screen. Design Elements: Use a color scheme that reflects the company's branding. Ensure the design is responsive for mobile and tablet compatibility. Choose clear and readable fonts. Include tooltips or helper texts for form fields where necessary.
