import React from 'react';
import './App.css';

function App() {
  return (
    <div>
      <div id="invoice">
        <h4 className="center-heading">Tax Invoice</h4>
        <table className="first-table">
          <tbody>
            <tr>
              <td
                <h2 className="head-1">CASIO</h2>
                <p>Near Upes, Bidholi, UK - 248007</p>
                <p><b>GST-IN: 01SEDRFTG2HJNBVC</b></p>
                <p>Phone: 745302667901</p>
                <p>e-Mail: [email protected]</p>
              </td>
            </tr>
          </tbody>
        </table>
        <br />
        <table className="in-table">
          <tbody>
            <tr>
              <th>Invoice Id</th>
              <th>Invoice Dated</th>
              <th>Reference Id <small>[if any]</small></th>
            </tr>
            <tr>
              <td>2023/TE/5465</td>
              <td id="datex">3/11/23</td>
              <td>HJFYRD87654</td>
            </tr>
          </tbody>
        </table>
        <br />
        <table className="ref-table">
          <tbody>
            <tr>
              <th>Buyer <small>(bill to)</small></th>
              <th>Consignee <small>(ship to)</small></th>
            </tr>
            <tr>
              <td className="customer_i">{/* Provide buyer info here */}</td>
              <td className="customer_i">{/* Provide consignee info here */}</td>
            </tr>
            <tr>
              <td className="address_i">{/* Provide buyer address here */}</td>
              <td className="address_i">{/* Provide consignee address here */}</td>
            </tr>
            <tr>
              <td>GST-IN: N/A</td>
              <td>GST-IN: N/A</td>
            </tr>
          </tbody>
        </table>
        <br />
        <table>
          <tbody>
            <tr>
              <th>Product </th>
              <th>HSN</th>
              <th>Qty</th>
              <th>Rate</th>
              <th>GST</th>
              <th>Taxable Amount</th>
              <th>GST Amount</th>
              <th>SubTotal</th>
            </tr>
            <tr>
              <td id="product_i">Gun</td>
              <td id="hsn_i">{/* HSN code here */}</td>¸
              <td className="qty_i">100</td>
              <td className="rate_i">{/* Rate here */}</td>
              <td className="gst_i">{/* GST info here */}</td>
              <td className="tax_a">{/* Taxable Amount here */}</td>
              <td className="gst_a">{/* GST Amount here */}</td>
              <td className="total">1.5 CR</td>
            </tr>
          </tbody>
        </table>
        <br />
        <table>
          <tbody>
            <tr>
              <th>Total Taxable Amount</th>
              <th>Total GST Amount</th>
              <th>Rounded Off</th>
              <th>Grand Total</th>
            </tr>
            <tr className="total-row">
              <td className="tax_a">{/* Total Taxable Amount here */}</td>
              <td className="gst_a">{/* Total GST Amount here */}</td>
              <td id="rdoff">0.0</td>
              <td className="total">{/* Grand Total here */}</td>
            </tr>
          </tbody>
        </table>
        <br />
        <table>
          <tbody>
            <tr>
              <th>Mode of Delivery</th>
              <td>MANUAL DELIVERY</td>
            </tr>
          </tbody>
        </table>
        <div className="terms-block">
          <p className="terms-description">
            Note:
            <br />- Points are rounded off.
            <br />- Subject to "UK" jurisdiction only.
            <br />- Terms and Conditions Apply.
          </p>
        </div>
        <div className="signature-block">
          <p className="signature-title">LEO</p>
          <p className="signature-name">
            <small>Authorised Signatory</small>
          </p>
        </div>
      </div>
    </div>
  );
}