JSFiddle - React, Tailwind, and code Playground

by NunoMira

HTML

<div class="custom">
        <script src="https://ssl.google-analytics.com/urchin.js" type="text/javascript"></script>
        <script type="text/javascript">_uacct = "UA-499813-16";urchinTracker();</script>
    </div>
    <div class="mestre">
        <h1>Santander | 4530 |</h1>
        <h2>Recibo do Pagador</h2>
        <table class="tab rec">
            <tbody>
                <tr>
                    <td class="vV">Vencimento<br><span class="vV">{{ conta.vencimento|date:"d/M/y" }}</span></td>
                    <td>Agência/Código do Beneficiário<br><span>01008143-9</span></td>
                    <td>Número do Documento<br><span>GC 8289</span></td>
                    <td>Nosso Número/Código do Documento<br><span>06/00000000378-{{ conta.id }}</span></td>
                </tr>
                <tr>
                    <td>Valor do Documento<br><span class="vV">{{ conta.valor }}</span></td>
                    <td>(-) Descontos<br><span>&nbsp;</span></td>
                    <td>(+) Acréscimos<br><span>&nbsp;</span></td>
                    <td>(=) Valor Cobrado<br><span class="vV">&nbsp;</span></td>
                </tr>
            </tbody>
        </table>
        <table class="infRec">
            <tbody>
                <tr>
                    <td class="sacAv">Pagador</td>
                    <td colspan="3">
                        <span>{{ conta.parceiro.razao_social }} - CPF/CNPJ: 777.999.333-88<br>
                            {{ conta.parceiro.logradouro }}, {{ conta.parceiro.numero }} {% if conta.parceiro.complemento %}- {{ conta.parceiro.complemento }}{% endif %} - {{ conta.parceiro.cep }} {{ conta.parceiro.cidade.nome }}-{{ conta.parceiro.estado }}<br>&nbsp;</span></td>
                        </tr>
                        <tr>
                            <td>&nbsp;</td>
                        </tr>
                        <tr>
                            <td class="sacAv">Sacador/Avalista</td>
                            <td...

CSS

body { 
        background-color:#FFF; 
        font:8px Verdana, Arial, Helvetica, sans-serif; 
        color:#000; 
        cursor:default; 
    }
    @page { 
        margin-right:0.5cm; 
        margin-left:0.5cm; 
        margin-bottom: 1cm; 
        margin-top: 1cm ;
    }
    @media screen { 
        body { 
            margin: 10px;
        } 
    }
    h1 { 
        float:left; 
        font-size:15px; 
        margin:0px; 
        text-align:left;
    }
    h2 { 
        float:right; 
        font-size:12px; 
        margin:0px; 
        text-align:right;
        vertical-align:bottom; 
    }
    hr {
       float:left;
       clear:left;
       width:100%;
       border-width:0;
       border-top:1px dashed #000;
       height:1px;
       margin:10px 0px;
   }
   hr.solid {
       border-top:1px solid #000;
       margin:2px 0;
   }
   p.aut { 
    width:100%;
    text-align:right;
    margin:0;
    float:right;
    font-size:10px;
}
table {
  float:left;
  width:100%;
  border-collapse:collapse;
}
table.tab {
   border:1px solid #000;
}
table.tab td {
 border:1px solid #000;
 text-align:left;
 vertical-align:top;
 padding:0px 2px 0px 2px;
}
table.rec td {
    width:25%;
}
table.tab td span, table.infRec td span {
 display:block;
 font-size:10px;
 padding:0px 5px 0px 5px;
}
table.tab td span.vV {
 text-align:center; 
 font-size:12px;
 font-weight:bold;
}
table.infRec td {
    vertical-align:top; 
    border:0 !important;
}table.infRec td.sacAv { 
    width:60px;
}
table.infRec td.autMecF {
  text-align: right;
}
table.infRec td.codBaixa {
    text-align: right;
    vertical-align:bottom;
}
table.tab table.infRec td {
 padding-bottom:0px !important;
 height:auto;
}
table .lD { 
    text-align:right !important;
}
div.barra {
  float:left;
  display:inline; 
  width:600px;
  margin:5px 0px 15px 20px;
}
div.barra div {
   float:left;
   display:block;
   width:0px;
   height:50px;
}
div.b0 { 
    border-right:1px solid #FFF;
}
div.b1 {
  border-right:3px...