JSFiddle - React, Tailwind, and code Playground

by SASSACB

HTML

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="UTF-8">
    <title></title>
    <style>
      span>input {
        background: none;
        color: white;
        border: 0;
        padding: 0;
        /* font-size: x-small;*/
      }

      input[type="text"] {
        font-size: small;
        /*border: 2px solid red;*/
        padding: 1px;
        border-radius: 5px;
      }

    </style>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
  </head>

  <body>
    <div class="container-fluid" style="text-align:center;">

      <form>

        <p>
          <input type="text" size="3.5" placeholder="Compra:" onfocus="this.value=''" id="num1" onchange="calc()"/> <input type="text" size="7" placeholder=" Bonificação:" onfocus="this.value=''" id="num2" onchange="calc()" />
          <input type="text" size="20" placeholder="Equivalência em Desc. Fin." id="sum" readonly="readonly" /></p>
        <p>

          <span class="btn-sm btn-primary"><i class="fas fa-angle-right"></i> <input type="button" value="Equivalência em Desc.Fin." onclick="calc()"/></span>

          <span class="btn-sm btn-warning">
            <i class="fa fa-times"></i> <input type="reset" value="Clear"/>
            
            </span>
        </p>
      </form>
    </div>

    <script>
      function calc() {        
        let num1 = Number(document.querySelector("#num1").value);        
        let num2 = Number(document.querySelector("#num2").value);        
        let sum = (1 - (num1 / (num1 + num2))) * 100;        
        document.getElementById("sum").value = sum.toFixed(2) + "%";    
      }

    </script>

  </body>

</html>