JSFiddle - React, Tailwind, and code Playground

by chrischilcoat

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://yakabod.yakabox.com/custom/css/cache/033d4bcd2270b90b4dc760589e162bbe.css?yakabox-vne-5.34.11-1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://dl.dropboxusercontent.com/s/nd1mexyy0xevhv5/6fdc3a856a26e706a3edad566422a903.css?dl=0/6fdc3a856a26e706a3edad566422a903.css?yakabox-vne-5.21.4-1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/js/bootstrap-colorpicker.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/css/bootstrap-colorpicker.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/countup.js/2.0.4/countUp.min.js"></script>
<br />
<br />
<br />
<br />
<div class="container-fluid">





  <div class="row">
    <div class="col-md-12 ui-dashboard-widget-tile ">
      <button title="Add Widget" class="btn btn-link btn-block proto-js-add-widget">
        <i class="fa fa-plus-circle fa-lg"></i>
        <span class="hidden-xs"> Add Widget</span>
      </button>
      <div class="proto-titleplaceholder">

      </div>


      <div class="ybx-dashboard-click-event ui-widget-edit-container" style="display:none;">
      ...

SCSS

.tt-menu.tt-open {
  background:#fff;
  padding:10px;
  color:black;
}
input[type="text"].typeahead {
  background-color:rgba(1,1,1,0);
  border:rgba(1,1,1,0);
  border: 1px solid transparent;
  color:#fff;
  padding:0;
}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: #fff;

}



body {
  padding:60px 0;
}
.row {
  position:relative;
}
.ui-widget-edit-container {
  left: 0px;
}
.ui-yakabox-dash-widget .ui-yakabox-dash-delete-widget-button {
    position: absolute;
    right: 0px;
    }
.panel .btn-group {
  visibility:hidden;
}
.panel:hover .btn-group {
  visibility:visible;
}


.ui-yakabox-dash-widget-content {
  padding-top:20px;
  .col-sm-6, .col-sm-12 {
    padding-left: 7px;
    padding-right: 7px;
  }
  .tile {
    position:relative;
    //max-width: 400px;
    margin: 0 auto 14px;
    p {
      margin:0;
      padding:0;
    }
    .tile-title {
      text-transform:uppercase;
    }
    .tile-filter {
    }
  }
  
  .tile-sm {
    .panel-body {
      padding:15px;
      .tile-title {
        font-size:13px;
      }
      .tile-value {
        font-size:38px;
      }
      .tile-filter {
        font-size:13px;
      }
    }
  }
  .tile-md {
    .panel-body {
      padding:45px 15px;
      .tile-title {
        font-size:16px;
      }
      .tile-value {
        font-size:30px;
      }
      .tile-filter {
        font-size:16px;
      }
    }
  }
  .tile-lg {
    .panel-body {
      padding:120px 15px;
      .tile-title {
        font-size:20px;
      }
      .tile-value {
        font-size:55px;
      }
      .tile-filter {
        font-size:20px;
      }
    }
  }






  .form-inline {
    position:relative;
  }
  .form-group {
    position:relative;
    background:transparent;
    box-shadow:none;
    border-top: 1px solid transparent;
  }
  

  
  /*
  .form-group {
    position:relative;
    background:transparent;
    box-shadow:none;
    border-top: 1px solid transparent;
    .input-group-addon {
      background:none;
     ...

JavaScript

$('.proto-ybx-typetofind').on('click', function() {
  $(this).val('');
});

// countUp.min.js
function countUp(a,b,c,d,e,f){this.options=f||{useEasing:!0,useGrouping:!0,separator:",",decimal:"."};for(var g=0,h=["webkit","moz","ms"],i=0;i<h.length&&!window.requestAnimationFrame;++i)window.requestAnimationFrame=window[h[i]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[h[i]+"CancelAnimationFrame"]||window[h[i]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(a){var c=(new Date).getTime(),d=Math.max(0,16-(c-g)),e=window.setTimeout(function(){a(c+d)},d);return g=c+d,e}),window.cancelAnimationFrame||(window.cancelAnimationFrame=function(a){clearTimeout(a)});var j=this;this.d="string"==typeof a?document.getElementById(a):a,this.startVal=Number(b),this.endVal=Number(c),this.countDown=this.startVal>this.endVal?!0:!1,this.startTime=null,this.timestamp=null,this.remaining=null,this.frameVal=this.startVal,this.rAF=null,this.decimals=Math.max(0,d||0),this.dec=Math.pow(10,this.decimals),this.duration=1e3*e||2e3,this.easeOutExpo=function(a,b,c,d){return 1024*c*(-Math.pow(2,-10*a/d)+1)/1023+b},this.count=function(a){null===j.startTime&&(j.startTime=a),j.timestamp=a;var b=a-j.startTime;if(j.remaining=j.duration-b,j.options.useEasing)if(j.countDown){var c=j.easeOutExpo(b,0,j.startVal-j.endVal,j.duration);j.frameVal=j.startVal-c}else j.frameVal=j.easeOutExpo(b,j.startVal,j.endVal-j.startVal,j.duration);else if(j.countDown){var c=(j.startVal-j.endVal)*(b/j.duration);j.frameVal=j.startVal-c}else j.frameVal=j.startVal+(j.endVal-j.startVal)*(b/j.duration);j.frameVal=Math.round(j.frameVal*j.dec)/j.dec,j.frameVal=j.countDown?j.frameVal<j.endVal?j.endVal:j.frameVal:j.frameVal>j.endVal?j.endVal:j.frameVal,j.d.innerHTML=j.formatNumber(j.frameVal.toFixed(j.decimals)),b<j.duration?j.rAF=requestAnimationFrame(j.count):null!=j.callback&&j.callback()},this.start=function(a){return...