JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<tr>
<table>
 <td class='barorange' colspan='4'>PERTE EN dB</td>
 </tr>
 <tr>
 <td colspan='3' class='.inputwatt '>
 <div class='ui-input-text ui-body-inherit ui-corner-all'>
 <input style="text-align: right;" type="tel" id="outwatt1" size="auto" onblur="calcular();" value="30" />
 </div>
 </td>
 <td class='bargrise2' style='line-height:15px'>Watt <br><span style='font-size: 9.00pt;line-height:15px'> Sortie Répéteur</span></td>
 </tr>
 <tr>
 <td colspan='3' class='.inputwatt '>
 <div class='ui-input-text ui-body-inherit ui-corner-all'>
 <input style="text-align: right;" type="tel" id="outwatt2" size="auto" onblur="calcular();" value="6"/>
 </div>
 </td>
 <td class='bargrise2' style='line-height:15px'>Watt<br><span style='font-size: 9.00pt;line-height:15px'>Sortie Filtration</span></td>
<tr>
  <td style='background-color:#A8D2DD;'>
 <span id="dbout"></span></td><td class='bargrise2' colspan='3'>PERTE EN "dB" ENTRE LES 2 SORTIES</td>

 </tr>
 </tr>
 </table>
 <script><!-- perte en dB-->	
function calcular() {
    var outwatt1 = Number(document.getElementById("outwatt1").value);
    var outwatt2 = Number(document.getElementById("outwatt2").value);
    var elemResult = document.getElementById("dbout");

		let calcul = Math.log10(outwatt1 / outwatt2) * 10;
    let affichage = new Intl.NumberFormat("fr-FR", {
      "style" : "decimal",
      "minimumFractionDigits" : 2,
      "maximumFractionDigits" : 2,
    }).format(calcul) + " dB";

    

    if (elemResult.textContent === undefined) {
       elemResult.textContent = affichage;
    } else { // IE
       elemResult.innerText = affichage;
    }
}


function formatNombre2Chiffres(nStr) {
	
	nStr = nStr.toFixed(2);
	nStr += '';
	
	let x = nStr.split('.');
	
	let x1 = x[0];
	let x2 = x.length > 1 ? ',' + x[1] : ',00';
	
	
	let rgx = /(\d+)(\d{3})/;
	
	while (rgx.test(x1)) {
		x1 = x1.replace(rgx, '$1' + ' ' + '$2');
		//x1 = x1.replace(rgx,...