JSFiddle - React, Tailwind, and code Playground

HTML

<body>

    <div class="cls2">

        <div class="wrapper">

            <div class="header">

                <div class="logo"></div>

                <div class="black">
                    <p>Rēķins / Invoiss</p>
                </div>

                <div class="cls03">

                    <table class="t01">
                        <tr>
                            <td class="date">01.01.2014</td>
                            <td class="rekins">rēķins</td>
                            <td class="number">Nr. 001705H-0114/R01</td>
                        </tr>
                    </table>

                </div>

            </div>

            <div class="pers">
                <div class="names">
                    <span style="float: left">Saņēmējs:</span>
                    <span style="float: right; margin-right: 150px">Maksātājs:</span>
                </div>
                <table class="t02">
                    <tr><td>SIA "reSynX Development"</td></tr>
                    <tr><td>Reģ.Nr.: LV0000000000</td></tr>
                    <tr><td>Rīga, Ruses iela 11-84, LV-1029</td></tr>
                    <tr><td></td></tr>
                    <tr><td>Banka: A/S Swedbank</td></tr>
                    <tr><td>Konts: LV07HABA0551018303112</td></tr>
                    <tr><td>SWIFT: HABALV22</td></tr>
                </table>

                <table class="t03">
                    <tr><td></td></tr>
                    <tr><td></td></tr>
                    <tr><td></td></tr>
                    <tr><td></td></tr>
                    <tr><td></td></tr>
                    <tr><td></td></tr>
                    <tr><td></td></tr>
                </table>

            </div>

        </div>

    </div>

</body>

CSS

/*@font-face {
    font-family: 'Corbel';
    src: url('http://localhost/503h/fonts/CORBEL.TTF') format('truetype');
}*/

body {
    position:absolute;
    top:0;
    left:50%;
    /*width:595px;*/
    /*height:841px;*/
    width: 794px;
    height: 1122px;
    margin: -25px 0 0 /*-297px*/-397px;
    border-style:outset;
    /* border: 1px solid #000; */
    /*overflow:hidden;*/
}

.cls2 {
    /*position:absolute;*/
    /*left:0;*/
    /*top:0;*/
    width: 100%;
    height: 100%;
}

.wrapper {
    width: 520px;
    height: 803px;
    margin: 38px 28px 0 47px;

    /*background: red;*/
}

.header {

}

.logo {
    width: 149px;
    height: 43px;
    float: left;
    background: url('logo.png');
}

.black {
    position: relative;
    left: 28px;
    width: 207px;
    height: 43px;
    float: right;

    background: #000;
}

.black p {
    margin: 0.45em 1em;

    color: #c6c6c6;
    font: 16pt 'Corbel', sans-serif;
}

.black:after {
    clear: both;
    width: 100%;
    height: 1px;
    content: '.';
    visibility: hidden;
}

.cls03 {
    padding: 70px 0 0 0;
}

.t01 {
    width: 100%;

    border: none;
    border-bottom: .13em solid #aaaaaa;
}

.t01 tr td {
    width: 196px;
    /*line-height: 20px;*/
}

.date, .number {
    font: 12pt 'Corbel', sans-serif;
    font-weight: bold;
}

.rekins {
    font: 16pt 'Corbel', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
}

.number {
    text-align: right;
}

.pers {
    margin: -20px 0 0 20px;
}

.names {
    width: 500px;
    height: 20px;
    margin: 30px 0 0 0;
}

.names span {
    font: 12pt 'Corbel', sans-serif;
    color: #aaaaaa;
}

.t02 {
    float: left;

    font: 11pt 'Corbel', sans-serif;
}

.t03 {
    float: right;
}