JSFiddle - React, Tailwind, and code Playground

HTML

<page>
    <style>
        #header_info p {
            display: inline;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        td {
            height: 1.3em;
        }
        .main-table, .main-table .main-td {
            border: 2px solid #767676;
        }
        table tr td {
            width: 25%;
        }
        table tr td h1 {
            margin: 0;
            text-align: center;
        }
        table tr td span {
            font-weight: bold;
        }
        table tr td span + p {
            display: inline;
        }
        .section {
            border-bottom:4px solid #767676;
        }
        .no-padding {
            padding: 0;
        }
        .address tr td, .customer tr td {
            width: 50%;
        }
        .no-border-bottom {
            border-bottom: 0;
        }
        .extra-info table tr td {
            border: 0;
        }
        .extra-info table:first-child {
            border-right: 1px solid #767676;
        }
        .extra-info table:last-child {
            border-left: 1px solid #767676;
        }
    </style>
    <div id="header_info">
        <p>
            <?php echo date( 'd/m/Y'); ?>
        </p>
        <p>Order Reference: %order_reference%</p>
    </div>
    <table class="main-table">
        <tr class="section">
            <td class="main-td" colspan="2"></td>
            <td class="main-td" colspan="2">
                	<h1>Order Reference: </h1>

                	<h1>%order_reference%</h1>

            </td>
        </tr>
        <tr class="section">
            <td class="main-td">	<span>Tel</span>

                <p>%tel_no%</p>
            </td>
            <td class="main-td">	<span>Fax</span>

                <p>%fax%</p>
            </td>
            <td class="main-td" colspan="2">	<span>Order Date</span>

                <p>%order_date%</p>
            </td>
        </tr>
        <tr>
            <td...