Custom sales invoice

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<table style="width: 100%; font-size: 13px">
    <tr>
        <td style="width: 100%">
            <img data-bind="attr: { src: SellerLogoUrl }" src="#" style="max-height: 80px;
        max-width: 300px;" />
        </td>
        <td style="text-align: left; white-space: nowrap">
            <div><b>Invoice No:</b>

            </div>
            <div># <span data-bind="text: Number"></span>

            </div>
        </td>
        <td style="text-align: right; white-space: nowrap; padding-left: 50px">
            <div><b>Issue Date:</b>

            </div>
            <div data-bind="text: IssueDate"></div>
        </td>
    </tr>
</table>
<table style="width: 100%; border: 1px solid #ccc; margin-top: 20px">
    <tr>
        <td colspan="2" style="padding: 40px; font-size: 24px; font-weight: bold">Račun / <span style="color: #C70052">Invoice</span>

        </td>
        <td></td>
    </tr>
    <tr>
        <td style="background-color: #eee; padding: 20px; vertical-align: top">
            <div style="color: #666; font-weight: bold">Račun izdaje / Issued by:</div>
            <div data-bind="text: Seller" style="font-weight: bold"></div>
            <div data-bind="foreach: SellerContactDetails">
                <div data-bind="text: $data"></div>
            </div>
        </td>
        <td style="background-color: #eee; padding: 20px; vertical-align: top">
            <div style="color: #666; font-weight: bold">Račun za / Issued to:</div>
            <div data-bind="text: Customer" style="font-weight: bold"></div>
            <div data-bind="foreach: CustomerAddressLines">
                <div data-bind="text: $data"></div>
            </div>
        </td>
        <td style="background-color: #eee; padding: 0px 20px; vertical-align: top">
            <div style="margin-top: -40px">
   ...

CSS

body {
    padding: 30px
}

JavaScript

ko.applyBindings({
    Seller: 'ACME Corporation',
    SellerContactDetails: ['1313 Webfoot Walk', 'Duckburg', 'Calisota'],
    SellerLogoUrl: 'business-logo?FileID=c6545179-0ba4-4cda-81a2-f07874f81a1e',
    DueDate: '24/07/2014',
    IssueDate: '27/06/2014',
    Number: '1001',
    Customer: 'Brilliant Industries',
    CustomerAddressLines: ['1 York Street', 'Metropolis'],
    Summary: 'Professional services',
    Notes: ['Please by due date.', 'Thank you for your business.'],
    LineItems: [{
        Description: ['Financial planning'],
        Qty: '4',
        UnitPrice: '100.00',
        Discount: '',
        Tax: 'VAT 10%',
        LineTotal: '400.00'
    }, {
        Description: ['Tax consulting'],
        Qty: '2',
        UnitPrice: '120.00',
        Discount: '',
        Tax: 'VAT 10%',
        LineTotal: '240.00'
    }],
    LineItemsIncludeTax: false,
    Subtotal: '640.00',
    TaxComponents: [{
        Name: 'VAT 10%',
        Amount: '64.00'
    }],
    Total: '704.00'
});