<body class="bg-gray-100 font-sans leading-normal tracking-normal h-screen flex items-center justify-center"> <div class="bg-white shadow-lg rounded-lg p-8 max-w-2xl w-full"> <h1 class="text-2xl font-bold mb-6 text-center">Create Invoice</h1> <form> <div class="mb-4"> <label for="invoice-no" class="block text-gray-700 mb-2">Invoice No</label> <input type="text" id="invoice-no" class="w-full p-2 border rounded" placeholder="Enter invoice number"> </div> <div class="mb-4"> <label for="invoice-date" class="block text-gray-700 mb-2">Invoice Date</label> <input type="date" id="invoice-date" class="w-full p-2 border rounded"> </div> <div class="mb-4"> <label for="customer" class="block text-gray-700 mb-2">Customer</label> <input type="text" id="customer" class="w-full p-2 border rounded" placeholder="Enter customer name"> </div> <div class="mb-4"> <label for="product" class="block text-gray-700 mb-2">Select Product</label> <select id="product" class="w-full p-2 border rounded"> <option value="">Select a product</option> <option value="product1">Product 1</option> <option value="product2">Product 2</option> <option value="product3">Product 3</option> </select> </div> <div class="mb-4"> <label for="quantity" class="block text-gray-700 mb-2">Quantity</label> <input type="number" id="quantity" class="w-full p-2 border rounded" placeholder="Enter quantity"> </div> <div class="mb-4"> <label for="amount" class="block text-gray-700 mb-2">Amount</label> <input type="number" id="amount" class="w-full p-2 border rounded" placeholder="Enter amount"> </div> <div class="mb-4"> <label for="discount" class="block text-gray-700 mb-2">Discount (%)</label> <input type="number" id="discount" class="w-full p-2 border rounded" placeholder="Enter discount percentage"> </div> <button type="submit" class="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-400">Create Invoice</button> </form> </div> </body>