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="5" placeholder="Valor Total" onfocus="this.value=''" id="valor" onchange="change()" />
          <input type="text" size="1" placeholder="IVA" onfocus="this.value=''" id="iva" onchange="calc()" />
          <input type="text" size="6" placeholder=" Desconto" onfocus="this.value=''" id="desconto" onchange="calc()" />
          <input type="text" size="8" placeholder="Valor a Pagar" id="sum" readonly="readonly" />€</p>
        <p>

          <span class="btn-sm btn-primary"><i class="fas fa-angle-right"></i> <input type="button"  value="Calcular" onclick="change()"/></span>

          <span class="btn-sm btn-warning"><i class="fas fa-times"></i> <input type="reset" value="Clear"/></span>
          <span class="btn-sm btn-info"><i class="far fa-copy"></i> <input type="button" value="Copiar" onclick="myFunction()"/></span>
        </p>
      </form>
    </div>

    <script>
      function myFunction() {
        var copyText = document.getElementById("sum");
        copyText.select();
        document.execCommand("Copy");
        alert("Copied the text: " + copyText.value);
      }
function change(){
    document.getElementById("valor").style.color = '#4286f4';
}
      function calc() {        
        let num1 =...