JSFiddle - React, Tailwind, and code Playground
HTML
<div class="a4"> <img class="mark1" src="mark.jpg" /> <img class="mark2" src="mark.jpg" /> <img class="mark3" src="mark.jpg" /> <div class="adressfeld"> <span class="small1">Mustermann Firma, Mustermannstraße 10, 88234 Musterhausen</span> <p> {if ($bill_bid_info.firm_name!="") }{$bill_bid_info.firm_name}<br />{/if} {if ($bill_bid_info.form_of_address!="") }{$bill_bid_info.form_of_address}<br />{/if} {$bill_bid_info.title_addition} {$bill_bid_info.first_name} {$bill_bid_info.last_name} <br /> {$bill_bid_info.street} <br /> <br /> {$bill_bid_info.plz} {$bill_bid_info.town} <br /> <br /> {if ($bill_bid_info.tel_1!="") }Telefon: {$bill_bid_info.tel_1} / {$bill_bid_info.tel_2}<br />{/if} </p> </div> <div class="logo"> <img src="logo.png" alt="no pic" width="320px" height="75px" /> <p class="small2"> Musterstraße 10<br /> 23456 Musterhausen<br /> Tel.: 0342 - 123 456 78<br /> Fax: 0342 - 123 456 79<br /><br /> Musterhaußen, {$bill_bid_info.date|date_format:"%d.%m.%Y"}<br /><br /> <table> <tr> <td class="bold">Auftragsnr.:</td> <td class="bold">{$bill_bid_info.job_id}</td> </tr> <tr> <td>Kundennr.:</td> <td>{$bill_bid_info.customer_id}</td> </tr> <tr> <td>Referenznr.:</td> <td>7905439754</td> </tr> </table> </p> </div> <div class="content"> <p> <h1>Auftrag</h1><br /> {if ($job_info.bid_needed==1)} zur {$job_info.auftrags_text}<br /><br /> {else} zur Reparatur für:<br /> {/if} {$job_info.j_manufactor}, {$job_info.j_modell} SN:...
CSS
body { margin:0; padding:0; font-family: Serif; } .adressfeld { position:absolute; left: 15mm; top: 45mm; width: 85mm; height: 45mm; } .logo { position: absolute; top: 5mm; right: 10mm; } .logo p, table{ text-align: right; } .logo table{ position: absolute; right:0; font-size: 1.1em; } .content { position: absolute; left: 15mm; top: 100mm; } .footer { position: absolute; top: 255mm; } .footer table tr td { width: 66.66mm; text-align: center; font-size: 0.8em; } .a4 { position:absolute; width:200mm; } .bold { font-weight: bold; } .small1 { font-size: 0.5em; text-decoration: underline; } .small2 { font-size: 0.8em; } .mark1 { position: absolute; top: 101mm; left: 0; } .mark2 { position: absolute; top: 144.5mm; left: 0; } .mark3 { position: absolute; top: 206mm; left: 0; } h1 { font-size: 1.3em; }