JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="main.css" rel="stylesheet">
    <script src="./transferencia.js"></script>
    <script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
</head>
<body>

        <div id="home-produto" class="main pull-left">

               
                  
                   
                  <div id="divContent">
                    
                    <div id="box-internet">
                            <div class="panel panel-default row box-produto">
                                <div class="panel-body">
                                    
                
                                          
                            <section class="section__title">
                              <p class="title-cingapura">Transferência de valores</p>
                            </section>
                
                

                
                                        <section class="section__transferencia--selecionados">
                              <div class="panel panel-default text-align--center col-xs-5 left-container-avulso">
                               <div class="panel-heading">
                                  <p class="panel-heading__itemName left-name"></p>
                                  <span class="panel-heading__itemNumber cor__second left-phone"></span>
                               </div>
                               <div class="panel-body">
                                  <p class="panel-heading__itemQty">
                                    <span class="left-value"></span>
                                    <span class="panel-heading__itemQty--lower"> GB</span>
                                 ...

CSS

@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
.material-icons {
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga'; }

.without-padding {
  padding-left: 0px;
  padding-right: 0px; }

.float-left {
  float: left !important; }

.btn-phone-container .btn.btn-default {
  width: 223px;
  height: 45px;
  border-radius: 4px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fefefe), to(#e8e8e8));
  background-image: linear-gradient(to bottom, #fefefe, #e8e8e8);
  border: solid 1px #d3d1d1;
  font-size: 12px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }
  .btn-phone-container .btn.btn-default:first-child {
    margin-top: 10px; }

.error-message {
  font-size: 1.5em;
  padding-bottom: 12px;
  font-weight: bold;
  margin-top: 44px;
  border-bottom: 1px dotted #000000; }

.error-message-info {
  border-radius: 4px;
  background-color: #f9ccc7;
  border: solid 1px #e35143;
  padding: 0px 16px;
  height: 44px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: 16px; }
  .error-message-info i {
    margin-right: 8px;
    font-size: 22px;
    color: #ff301d; }

.panel-component-info .error-message-info {
  margin-top: 47px; }

.error-message-info span {
  font-size: 11px;
  text-align: left;
  color: #222222; }

.error-message-info .glyphicon {
  width: 20px;
  height: 20px;
  background: #ff301d;
  border-radius: 50%;
  text-align: center;
  /* line-height: 0px; */
  font-size: 12px;
  line-height: 1.8;
  color: white;
  font-weight: 100;
  margin-right: 8px; }

.message-title {
  font-size: 1.5em;
  font-weight: bold;
  margin-top: 44px; }

.message-body {
  font-size: 14px;
  line-height: 1.14;
  text-align: left;
  color:...

JavaScript

//var minValue = 10; //10MB


function formatNumberComma (num) {
  return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
}

function formatNumber(num){
   num = num/1000;

  if(num == parseInt(num)){
    return formatNumberComma(parseInt(num));
  }

  return formatNumberComma(num.toFixed(2));
}

//server side values
var initialValuesUserbar = {
  'minValue': 10, //min value
  'usersInfo': [
    //left
    {
      name: 'Marianna',
      value: 50000,
      avulso: 4000,
      bloqueado: true
    },
    //right
    {
      name: 'Ludmilla',
      value: 50000,  //3000
      avulso: 0,
      bloqueado: false
    }
  ]
}

var currentValuesUserbar = [];


var setInitialBarValues = function(values){
  //console.log(values)
  var usersInfo = values.usersInfo;
  var left = usersInfo[0];
  var right = usersInfo[1];

  currentValuesUserbar.push(left.value)//[0]
  currentValuesUserbar.push(right.value)//[1]

  //$('.warn-message-info.ator-desabilitado').hide();
  $('.blocknumber-left').hide();
  $('.blocknumber-right').hide();

  if(left.bloqueado) $('.blocknumber-left').show();
  if(right.bloqueado) $('.blocknumber-right').show();

  //left
  $('.left-name').text(left.name)
  $('.left-value').text(formatNumber(left.value));

  // if(left.avulso) {
  //   $('.left-avulso-value').text("+" + formatNumber(left.avulso) +" GB avulso")
  // }

  $('.right-name').text(right.name)
  $('.right-value').text(formatNumber(right.value))

  // if(right.avulso){
  //   $('.right-avulso-value').text("+" + formatNumber(right.avulso) +" GB avulso")
  // }
}

function addSpeed(){
  hold_trigger.mousedown(function() {
          
    userEventClickId = setTimeout(funcao_teste, hold_time);
  }).bind('mouseup mouseleave', function() {
      clearTimeout(userEventClickId);
      // voltar ao tempo normal aqui
  });

  function funcao_teste() {
    // acelerar o tempo aqui
  }
};

function clearErrorAdd(){
  $('.left-container-avulso').removeClass('nactive')
 ...