JSFiddle - React, Tailwind, and code Playground
HTML
<table style="width: 100%; font-size: 12px">
<tr>
<td width="77%" style="width: 100%">
{% if business.logo != null %}<img src="{{ business.logo }}" style="max-width: 300px; max-height: 150px">{% endif %}
</td>
<td width="23%" style="text-align: right; white-space: nowrap">
<td style="text-align: right;"><div style="font-weight: bold; white-space: nowrap; font-size: 12px; font-style: normal;">{{ business.name }}</div>
<div style="white-space: nowrap; font-size: 12px" >{{ business.contact_information | newline_to_br }}</div>
<div style="white-space: nowrap">{{ business.identifier }}</div></td>
</td>
</tr>
</table>
<div style="height:100px"></div>
<table style="width: 100%; border: 1px solid #ccc; margin-top: 20px">
<tr>
<td colspan="2" bgcolor="#00BAF2" style="padding: 15px; font-size: 13px; font-weight: bold; border: 1px solid #ccc; text-align:center;"><span style="color: #ffffff; font-weight: bold;">ΤΙΜΟΛΟΓΙΟ <span style="font-weight: bold; padding-bottom: 20px; font-size: 14px">{{ summary }}</span></span>
</td>
</tr>
<tr>
<td width="67%" style="background-color: #eee; padding: 20px; vertical-align: top; border: 1px solid #ccc;"><div style="color: #666; font-weight: bold;"><u>ΣΤΟΙΧΕΙΑ ΠΕΛΑΤΗ</u></div>
<div style="font-weight: bold" > {{ customer.name }}</div>
<div > {{ billing_address | newline_to_br }} | Τηλ.:{{ customer.telephone }}</div>
<div > {{ customer.identifier }}</div>
<div > {{ customer.website}}</div>
<div ></div>
</div></td>
<td width="33%" style="background-color: #eee; padding: 0px 20px; vertical-align:middle"><div><b>Ημερομηνία</b> </div>
{{ issue_date | date_to_string }}
</div><br><br>
<div><b>Σειρά / Αριθμός</b></div><div>{{ reference }}</div></td>
</tr>
</table>
<div style="padding: 20px 0px; font-weight: bold; font-size: 14px; text-align:center"><span style="color:...