JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
    <head>
        <link rel="stylesheet" href="rechnung.css?1609854957">
    </head>
    <body >
        <div class="kundendaten absolute">
            <p class="bold">Frau Mag. name</p>
            <p>strasse</p>
            <p>plz ort</p>
            <p></p>
        </div>
        <div class="kundennummer absolute">
            <p class="bold">Kundennummer</p>
            <p class="kundennummer_wert">2162</p>
        </div>
        <div class="leistungszeitraum absolute">
            <p class="bold">Leistungszeitraum</p>
            <p  class="leistungszeitraum_wert">Februar 2021</p>
        </div>
        <div class="rechnungsdatum absolute">
            <p class="bold">Rechnungsdatum</p>
            <p  class="rechnungsdatum_wert">05.01.2021</p>
        </div>
        <div class="rechnungsnummer_wrapper absolute">
            <p class="rechnungsnummer bold">Rechnung Nr. asdas</p>
                                    <p class="rechnungsnummer_zusatz absolute">aaabb</p>
                            </div>
        <div class="positionen_linie_oben absolute"></div>

        <div class="positionen_bezeichnung_header absolute bold">Bezeichnung</div>
        <div class="positionen_menge_header absolute bold">Menge</div>
        <div class="positionen_einzelpreis_header absolute bold">Einzelpreis</div>
        <div class="positionen_ust_header absolute bold">USt.</div>
        <div class="positionen_gesamt_header absolute bold">Gesamt</div>

        <div class="positionen_linie_header absolute"></div>
                    
            <div class="positionen_bezeichnung absolute" style="top:107mm;">Abwicklungsaufwand</div>
            <div class="positionen_menge absolute"  style="top:107mm;">2</div>
            <div class="positionen_einzelpreis absolute"  style="top:107mm;">52,24 €</div>
            <div class="positionen_ust absolute"  style="top:107mm;">20%</div>
            <div class="positionen_gesamt absolute"  style="top:107mm;">104,48 €</div>

...

CSS

@page{
    margin-header:0mm;
    margin-footer:0mm;
    margin:0%;
    size: 210mm 297mm;
}

html, body {
    width: 210mm;
    height: 297mm;
    padding:0px;
    margin:0px;
    position:absolute;
    font-size:10px;
    font-family: Arial, Helvetica, sans-serif;
}
.bold{
    font-weight: bold;
}
.absolute{
    position: absolute;
}
.kundendaten{
    left:20mm;
    top:50mm;
    font-size:10pt;
}
.kundennummer{
    left:110mm;
    top:73mm;
    font-size:8pt;
}
.kundennummer_wert{
    font-size:10pt;
}
.leistungszeitraum{
    left:140mm;
    top:73mm;
    font-size:8pt;
}
.leistungszeitraum_wert{
    font-size:10pt;
}
.rechnungsdatum{
    left:170mm;
    top:73mm;
    font-size:8pt;
}
.rechnungsdatum_wert{
    padding-left:6.5mm;
    font-size:10pt;
}
.rechnungsnummer_wrapper{
    top:85mm;
    left:20mm;
    font-size:12pt;
}

.rechnungsnummer{
    font-size: 12pt;
}
.rechnungsnummer_zusatz{
    top:6mm;
    width:150mm;
    font-size:10pt;
}
.positionen_linie_oben{
    left:20mm;
    top:100mm;
    width:174mm;
    border-top:2px solid black;
}
.positionen_linie_header{
    left:20mm;
    width:174mm;
    top:106mm;
    border-bottom:1px solid black;
}
.positionen_bezeichnung_header{
    top:102mm;
    left:23mm;
    width:74mm;
    text-align: left;
    font-size: 8pt;
}
.positionen_menge_header{
    top:102mm;
    left:80mm;
    width:39mm;
    text-align:center;
    font-size: 8pt;
}
.positionen_einzelpreis_header{
    top:102mm;
    left:119mm;
    width:21mm;
    text-align:right;
    padding-right:9mm;
    font-size: 8pt;
}
.positionen_ust_header{
    top:102mm;
    left:149mm;
    width:18mm;
    text-align:center;
    font-size: 8pt;
}
.positionen_gesamt_header{
    top:102mm;
    right:21mm;
    width:25mm;
    text-align:right;
    font-size: 8pt;
}

.positionen_bezeichnung{
    left:20mm;
    width:60mm;
    text-align: left;
    padding-left:3mm;
    font-size: 10pt;
}
.positionen_menge{
    left:80mm;
    width:39mm;
    text-align:center;
   ...