JSFiddle - React, Tailwind, and code Playground

by luamelo

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
 
<form class="col-xs-12">
  <div class="type-fields">
  
    <div class="form-group hide">
      <label for="regional">Regional</label>
      <select class="form-control" id="regional">
        <option value="16.4" selected>Sul</option>
        <option value="12.9">Norte</option>
        <option value="12.9">Centro</option>
      </select>
    </div>
    
    <div class="form-group">
      <label for="original-di">ORIGINAL DI</label>
      <input type="text" class="form-control" id="original-di">
    </div>
    <div class="form-group">
      <label for="wg-scout">WG/Scout</label>
      <input type="text" class="form-control" id="wg-scout">
    </div>
    <div class="form-group">
      <label for="transorb-r">TRANSORB R</label>
      <input type="text" class="form-control" id="transorb-r">
    </div>
    <div class="form-group">
      <label for="ultra">ULTRA</label>
      <input type="text" class="form-control" id="ultra">
    </div>
    <div class="form-group">
      <label for="sumisoya">SUMISOYA</label>
      <input type="text" class="form-control" id="sumisoya">
    </div>
  </div>
  
  <div class="form-group">
    <label for="qtd-litros">Qtd Litro Equivalente</label>
    <input type="text" class="form-control" id="qtd-litros" readonly>
  </div>
  <div class="form-group">
    <label for="vol-kregs">Volume em Kregs</label>
    <input type="text" class="form-control" id="vol-kregs" readonly>
  </div>
  <div class="form-group">
    <label for="vol-inc-kregs">Volume Incentivo (Kregs)</label>
    <input type="text" class="form-control" id="vol-inc-kregs" readonly>
  </div>
  <div class="form-group">
    <label for="fator-calculo">Fator calculo</label>
    <input type="text" class="form-control" id="fator-calculo" readonly>
  </div>
  <div class="form-group">
    <label for="premio-roundup">Premiação Roundup</label>
    <div class="currency">
     ...

CSS

.currency{
  position: relative;
}
.currency:after{
  content: 'R$';
  position: absolute;
  left: 12px;
  top: 0;
  height: 100%;
  line-height: 35px;
}
.currency input{
  padding-left: 35px;
}

JavaScript

var field = {
		regional: document.querySelector('#regional'),
		original_di: document.querySelector('#original-di'),
    wg_scout: document.querySelector('#wg-scout'),
    transorb_r: document.querySelector('#transorb-r'),
    ultra: document.querySelector('#ultra'),
    sumisoya: document.querySelector('#sumisoya'),
    qtd_litros: document.querySelector('#qtd-litros'),
    vol_kregs: document.querySelector('#vol-kregs'),
    vol_inc_kregs: document.querySelector('#vol-inc-kregs'),
    fator_calculo: document.querySelector('#fator-calculo'),
    premio_roundup: document.querySelector('#premio-roundup'),
    premio_sumi: document.querySelector('#premio-sumi'),
    premio_total: document.querySelector('#premio-total')
};

function calculateAll(){
	var ea_calculado = {
  		original_di: 370 / 360,
  		wg: 720 / 360,
      transorb_r: 1.3,
      ultra: 1.8
  };
  
	var calculo_prod = {
  		original_di: ea_calculado.original_di * removeCommas(field.original_di.value),
  		wg: ea_calculado.wg * removeCommas(field.wg_scout.value),
      transorb_r: ea_calculado.transorb_r * removeCommas(field.transorb_r.value),
      ultra: ea_calculado.ultra * removeCommas(field.ultra.value),
      sumisoya: removeCommas(field.sumisoya.value)
  };
  
  var calculo_prod_total = calculo_prod.wg + calculo_prod.transorb_r + calculo_prod.ultra;
  
  /**/
  var fator_kreg = {
  		original_di: Number((calculo_prod.original_di / 3.785) / 1000),
      wg: Number((calculo_prod.wg / 3.785) / 1000),
      transorb_r: Number((calculo_prod.transorb_r / 3.785) / 1000),
      ultra: Number((calculo_prod.ultra / 3.785) / 1000)
  };
  
  /*Volume incentivo Kregs*/
  var calculo_incentivo_kreg = fator_kreg.wg + fator_kreg.transorb_r + fator_kreg.ultra;
  
  /*fator calculo ponderado*/
  var fator_calculo = Number(calculo_prod.wg * 1.50 + calculo_prod.ultra * 2.00 + calculo_prod.transorb_r * 1.00) / calculo_prod_total;
  
  /*premiacoes*/
  var premio_roundup;
  var c_prod =...