JSFiddle - React, Tailwind, and code Playground

by ronnjoe

HTML

<div style="width:100%">
    <table border="1" style="width:100%">
        <tr>
            <td>
                <div> 1. exemplaire contrôle tarif</div>
                <div> 1. Copy for orderer</div>
                <div> 1. Blatt Tarifkontrolle </div>

            </td>
            <td>
                <div>2. exemplaire transporteur</div>
                <div>2. Copy for carrier</div>
                <div>2. Blatt Frachtführer</div>
            </td>
            <td>
                <div> 3. exemplaire destinataire</div>
                <div> 3. Copy for consignee</div>
                <div> 3. Blatt Empfänger</div>
            </td>
            <td>
                <div>4e exemplaire expéditeur</div>
                <div> 4. Copy for sender</div>
                <div> 4. Blatt Absender </div>
            </td>
        </tr>
        <tr>
        <td colspan="4">
<div style="width:100%;border:1px solid black;position:relative;">
    <div style="margin:0px 150px">
        <table border="1" style="width:100%">
            <tr>
            	<td>
            		
    <div class="rotate270">
        <div style="float:left;;margin-right:60px;">
            <div>A remplir sous la responsabilitê de l'expéditeur</div>
            <div>To be competed on the sender's responsability</div>
            <div>Ausfüllen unter der Verantwortung des Absenders</div>
        </div>
        <div style="float:left;margin-right:30px;">
            <div>1</div>
            <div>15</div>
        </div>
        <div style="float:left;margin-right:60px;">
            <div>y compris</div>
            <div>including and</div>
            <div>einschlieblich</div>
        </div>
        <div style="float:left;margin-right:60px;">
            <div>21 + 22</div>
        </div>
        <div style="float:left;margin-right:60px;">
            <div>Les parties encadrées de lignes grasses doivent être remplies par le transporteur.</div>
            <div>The spaces framed with heavy lines must filled...

CSS

.rotate90 {
        transform: rotate(90deg);
        transform-origin: top right;
        position: absolute;
        top: 1620px;
        left: 230px;
        white-space: nowrap;
    }
    .rotate270 {
        transform: rotate(270deg);
        transform-origin: top left;
        position: absolute;
        top: 1750px;
        left: 40px;
        white-space: nowrap;
    }
    table {
        border-collapse: collapse;
    }
    table td{
       vertical-align:top;
    }