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>
<br />
<br />
<br />
<br />
<div class="container-fluid">
  <div class='row'>
    <div class="col-md-3"></div>
    <div class="col-md-6 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;">
        <div class="row">
          <div class="col-xs-12">
            <div>
              <div class="ui-yakabox-dash-widget ui-yakabox-dash-widget-edit-inline">
               ...

SCSS

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;
      opacity:.7;
    }
    .tile-filter {
      opacity:.7;
    }
  }
  
  .tile-sm {
    .panel-body {
      padding:15px;
      .tile-title {
        font-size:13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .tile-value {
        font-size:18px;
      }
      .tile-filter {
        font-size:13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .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;
      border:none;
    }
    .form-control {
      background:none;
      border:none;
     ...

JavaScript

$('.btn-green').on('click', function() {
  removeThemes();
  $('.panel').addClass(' ui-yakabox-banner-theme-green');
  //$('#cp1').colorpicker('setValue', '#21AC90');
  //$('#cp2').colorpicker('setValue', '#aaefe1');
});
$('.btn-lightgreen').on('click', function() {
  removeThemes();
  $('.panel').addClass(' ui-yakabox-banner-theme-lightgreen');
  //$('#cp1').colorpicker('setValue', '#40B56B');
  //$('#cp2').colorpicker('setValue', '#d2efdd');
});
$('.btn-purple').on('click', function() {
  removeThemes();
  $('.panel').addClass(' ui-yakabox-banner-theme-purple');
  //$('#cp1').colorpicker('setValue', '#8F53A2');
  //$('#cp2').colorpicker('setValue', '#e6d7ea');
});
$('.btn-blue').on('click', function() {
  removeThemes();
  $('.panel').addClass('ui-yakabox-banner-theme-blue');
  //$('#cp1').colorpicker('setValue', '#338ac3');
  //$('#cp2').colorpicker('setValue', '#cfe5f3');
});
$('.btn-orange').on('click', function() {
  removeThemes();
  $('.panel').addClass(' ui-yakabox-banner-theme-orange');
  //$('#cp1').colorpicker('setValue', '#E9B125');
  //$('#cp2').colorpicker('setValue', '#fcf3de');
});
$('.btn-darkorange').on('click', function() {
  removeThemes();
  $('.panel').addClass(' ui-yakabox-banner-theme-darkorange');
  //$('#cp1').colorpicker('setValue', '#DA742B');
  //$('#cp2').colorpicker('setValue', '#f8e6d9');
});
$('.btn-red').on('click', function() {
  removeThemes();
  $('.panel').addClass(' ui-yakabox-banner-theme-red').css("background", "");
  //$('#cp1').colorpicker('setValue', '#AD1F02');
  //$('#cp2').colorpicker('setValue', '#fe937d');
});
$('.btn-lightgray').on('click', function() {
  removeThemes();
  $('.panel').addClass('ui-yakabox-banner-theme-lightgray');
  //$('#cp1').colorpicker('setValue', '#DCE0E3');
  //$('#cp2').colorpicker('setValue', '#ffffff');
});
$('.btn-gray').on('click', function() {
  removeThemes();
  $('.panel').addClass(' ui-yakabox-banner-theme-gray');
  //$('#cp1').colorpicker('setValue', '#8E9D9E');
 ...