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">
      <h1>
      Headline
      </h1>
    </div>
  </div>
  <div class='row'>
    <div class="col">
      <div class=" panel panel-primary text-center" style="display:;">
        <div class="panel-heading">
          <h5 contenteditable="true" style="margin:30px 0;">Fix Theme Background</h5>
          <h2 style="margin:30px 0;">Completed</h2>
          <h5 contenteditable="true" style="margin:30px 0;">Status</h5>
        </div>
      </div>
    </div>
    <div class="col">
      <div class=" panel panel-success text-center" style="display:;">
        <div class="panel-heading">
          <h5 contenteditable="true" style="margin:30px 0;">Defect Title</h5>
          <h2 style="margin:30px 0;">...</h2>
          <h5 contenteditable="true" style="margin:30px 0;">Assigned To</h5>
        </div>
      </div>
    </div>
    <div class="col">
      <div class=" panel panel-danger text-center" style="display:;">
        <div class="panel-heading">
          <h5 contenteditable="true" style="margin:30px 0;">Defect Title</h5>
          <h2 style="margin:30px...

SCSS

body {
  padding-top:20px;
}
.row {
  position:relative;
}
.ui-widget-edit-container {
  left: 0px;
}
.ui-yakabox-dash-widget-content {
  min-height:300px;
  display: flex;
  justify-content: center;
  align-items: center;
  .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;
}

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();
  e.preventDefault();
});

$('.proto-select-field').on('click', function(e){
  $('.proto-findfield').hide();
  $('.panel').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-yakabox-dash-toolbar').show();
  
  $('.ui-widget-edit-container').replaceWith($x);
  e.preventDefault();
});