JSFiddle - React, Tailwind, and code Playground

by chrischilcoat

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div>
   <h4>Formula Field Options</h4>
   <hr/>
   <div class="row">
      <div class="col-xs-2">
         <strong>Label</strong>
      </div>
      <div class="col-xs-10">
         <input class="form-control" type="text"/>
      </div>
   </div>
   <hr/>
   <div class="row">
      <div class="col-xs-2">
         <strong>Formula</strong>
      </div>
      <div class="col-xs-10">
         <p class="ui-yakabox-formula" style="display:none;">
            <span class="ui-yakabox-formula-label-1">Value1</span> 
            <span class="ui-yakabox-formula-operator-1">+</span>
            <span class="ui-yakabox-formula-label-2 " style="display:none;">Value2</span>
         </p>
         <div class="form-group has-feedback">
            <div class="row">
               <span class="col-xs-9">
                  <div class="input-group">
                     <span class="input-group-addon">
                     <span class="fa fa-search"></span>
                     </span>
                     <input type="text" class="form-control typeahead1" data-provide="typeahead" placeholder="Type to Select a Field"/>
                  </div>
               </span>
               <span class="col-xs-3">
               <button class="btn btn-default btn-block ui-yakabox-wherebtn1" style="display:none;">Where</button>
               </span>
            </div>
            <div class="row ui-yakabox-where1" style="display:none; margin-top:10px;">
               <span class="col-xs-2" style="padding-top:5px">
                 <strong>Where</strong>
               </span>
               <span class="col-xs-7">
               
                  <div class="input-group">
                     <span...

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
* { font-family: open sans; font-weight:200px;}

body {
  margin: 10px;
  background: #efefef;
}

.fa {
  color: #999
}

.btn-success .fa {
  color: #fff
}
small {
  text-transform:uppercase;
  color:#aaa;
}


.fa-green {
  color: green;
}

h4 {
  margin-bottom: 20px;
  font-size: 14px;
  text-transform: uppercase;
  opacity: .5;
}

hr {
  /*margin:30px 0;*/
}
#refresh {
  margin-left:-2px;
  margin-right:10px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;

}

.ui-logs {
  
  width:100%;
  height:300px;
  overflow-y:auto;
  border:1px solid #ddd;
  background-color: #fff;
  margin-top:10px;
 
}
.btn {
  text-transform: uppercase;
}

JavaScript

$("#maint").click( function () {

alert('Are you sure you want switch to Maintenace Mode? Have you notifed users?')

});
$( '.ybx-spin-refresh' ).click(function() {
    $( this ).find('.fa-refresh').addClass( 'fa-spin fa-green' );

    //Trying to use setTimeout, but doesn't seem to work either.
    var $el = $(this);
    setTimeout(function() { $el.find('.fa-refresh').removeClass( 'fa-spin' ); }, 3000);
    setTimeout(function() { $(this).addClass( 'fa-green' ); }, 3000);


});