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/137de011e0fc2440ce11c99272733d49.css?yakabox-vne-5.17.8-1">
<link rel="stylesheet" href="https://childev.yakabod.net/css/scss/yakabox5.css">
<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>

<div class="container-fluid">



  <div class='row'>
    <div class="col">
      <div class=" panel panel-warning text-right" style="max-width:100%;">
        <div class="panel-heading" style="min-height:auto;">
          <h5 contenteditable="true" style="margin:0 0 10px; text-transform:uppercase; opacity:.7; font-weight:700;  ">Defects</h5>
          <h2 style="margin:10px 0; text-transform:uppercase;"><strong>34</strong></h2>
          <h5 contenteditable="true" style="margin:10px 0 0; opacity:.7; font-weight:700; ">Assigned</h5>
          <img src="https://stagedaws.yakabod.net/images/userupload/stock_forms/thumbnail_37.svg?v=20191106" style="position:absolute; left:25px; top:-30px; ">
          
        </div>
      </div>
    </div>
     <div class="col">
      <div class=" panel panel-success text-right" style="max-width:100%;">
        <div class="panel-heading" style="min-height:auto;">
          <h5 contenteditable="true" style="margin:0 0 10px; text-transform:uppercase; opacity:.7;   font-weight:700; ">Defects</h5>
          <h2 style="margin:10px 0; text-transform:uppercase;"><strong>10</strong></h2>
          <h5...

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;
    }
.ui-yakabox-dash-widget-content {
  min-height:300px;
  display: flex;
  justify-content: center;
  align-items: center;
  .form-inline {
    position:relative;
  }
  .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;
      box-shadow:none;
    }
    .input-group {
      border-bottom: 1px solid black;
    }
    .list-group {
      position:absolute;
      margin-top:30px;
    }
  }
  
}
.proto-font-color-block {
  position: absolute;
  left: 10px;
  height: 5px;
  width: 20px;
  top: 26px;
  background: red;
  border:1px solid #ccc;
}



.panel {
  max-width:300px;
  margin:0 auto 20px;


  .panel-heading {
    min-height:250px;
  }
  .list-group {
    margin:0;
  }
  .list-group-item {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background-color: transparent;
    border-bottom: 1px solid #ddd;
    border: none;
  }
  .list-group-item:last-child {
    border:none;
  }
  .list-group-item:hover {
    background:rgba(0,0,0,.1);
  }
  a.list-group-item, button.list-group-item {
    color: #fff;
    border-bottom: 1px solid rgba(0,0,0,.1);
  }
}

JavaScript

$('.proto-js-add-widget').on('click', function(e){
  $(this).hide();
  $('.ui-widget-edit-container').show();
  e.preventDefault();
});

$('.proto-opendropdown').on('click', function(e){
  $(this).next().show();
  e.preventDefault();
});

$('.proto-select-resource').on('click', function(e){
  $('.proto-findresource').hide();
  $('.proto-findfield').show();
  $('[data-toggle="tooltip"]').tooltip();
  e.preventDefault();
});

$('.proto-back-arrow').on('click', function(e){
  $('.proto-findfield').hide();
  $('.proto-findresource').show();
  $('.proto-opendropdown').next().hide();
  e.preventDefault();
});

$('.proto-select-field').on('click', function(e){
  $('.proto-findfield').hide();
  $('.proto-panel').show();
  $('.proto-x').show();
  e.preventDefault();
});

$('#myTabs a').on('click', function (e){
  e.preventDefault();
  $(this).tab('show')
});

$('.proto-save-widget').on('click', function (e){
  var $x = $('.proto-panel').clone();
  $('.ui-widget-edit-container').replaceWith($x);
  e.preventDefault();
});