JSFiddle - React, Tailwind, and code Playground

HTML

<table  class="factura" border="0">
      <tr>
        <td colspan="2" class="info" >
           logo
        </td>

        <td colspan="1" >
          <p>Av Wall Street 340<br/>
           Bayern Munchen, Al 18, EU<br/>
           T.(511) 241 5522</p>
        </td>
     
        <td class="trick"colspan="3" rowspan="3" align="center">
          <h1>RUC N° 20516223163</h1>
          <h1>INVOICE</h1>
          <h1>N° 001- 0004</h1>
        </td>
      </tr>

      <tr>
        <td colspan="3">Sir: Javascript Experts</td>
      </tr>

      <tr>
        <td colspan="3">R.U.C N° 0171717111</td>
      </tr>  

      <tr>
        <td colspan="3">Address: United states 233</td>
        <td colspan="3">Eu, Date today</td>
      </tr>

      <tr>
        <td colspan="6">For the next:</td>
      </tr>

      <tr>
        <th class="smac">CANT.</th>
        <th class="smac">CODE</th>
        <th class="smal"colspan="2">DESCRIPTION</th>
        <th class="smac">P. UNIT.</th>
        <th class="smac">IMPORT</th>
      </tr>

 
      <tr>
        <td class="info">1</td>
        <td class="info">A22213</td>
        <td align="left" colspan="2">First Product</td>
        <td class="info">$ 120</td>
        <td class="info">$ 120</td>
      </tr>
    

      <tr>
        <td class="info"></td>
        <td class="info"></td>
        <td class="smal" colspan="2" >.</td>
        <td class="info"></td>
        <td class="info"></td>    
      </tr>

      <tr>
        <td class="info"></td>
        <td class="info"></td>
        <td class="smal"colspan="2" >.</td>
        <td class="info"></td>
        <td class="info"></td>    
      </tr>

      <tr>
        <td class="info"></td>
        <td class="info"></td>
        <td class="smal" colspan="2" >.</td>
        <td class="info"></td>
        <td class="info"></td>    
      </tr>
                        
      <form> 
      <tr>
        <td class="info"></td>
        <td class="info"></td>
        <td  class="smal" colspan="2"...

CSS

table.factura {
  font: 11px/24px Verdana, Arial, Helvetica, sans-serif;*/
  border-collapse: collapse;*/
  width: 700px;

 font-size:12px
}

td.trick {
  width: 100px;
 
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;  
 
}  

th {
  padding: 0 0.5em;
  text-align: center;
 
}

th.smac {
  width: 60px;
  text-align: center;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;  
 
}  

th.smal {
  width: 60px;
 
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;  
 
}  

td.smal {
  width: 60px;
 
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;  
 
}  

 
 
  

td.info {
 
  text-align:center;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;  
  
  }
 

td.blank {
 
  text-align:center;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;  
  
  }

td.outer{
  border-radius: 20px;
 width: 60px;
 
  background-color: #F3F3F3;
   
  text-align: center;
} 
p { margin: -1px; }