JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/bootstrap-slider.min.js"></script>
<div class=containter>
  <div class="col-xs-12">
    <h4>
Headline Widget Frozen </h4>
    <div class="container ">
      <div class="row">
        <div class="col-xs-8 col-sm-8 col-md-18 col-lg-8">
          <div class="ui-yakabox-dash-widget">
            <div class="container-fluid">
              <div class="row">
                <div clas="col-xs-12">
                  <h1>This is a Headline Widget</h1>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <hr/>
    <h4>
Headline Widget in Edit Page Mode Widget Frozen </h4>
    <div class="container ui-yakabox-dash-edit-all">
      <div class="row">
        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
          <div class="ui-yakabox-dash-widget">
            <div class="container-fluid">
              <div clas="col-xs-12">
                <div class="row">
                  <h1>This is a Headline Widget</h1>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
          <button class="btn btn-link ui-yakabox-btn-icon-right">
            <i class="fa fa-plus  bg-primary"></i> <span class="hidden-sm">Add Widget</span>
          </button>
        </div>
      </div>
    </div>
    <br/>
    <hr/>
    <h4>
Headline Widget Edit in-line </h4>
    <div class="container ">
      <div class="row">
        <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
          <div...

SCSS

* {
  font-family: 'Open Sans', sans-serif;
}

.ui-yakabox-dash-edit-all > div[class="row"] {
  border: 1px dotted rgba(0, 0, 0, 0.2);
  margin-top: 15px;
  background-color: rgba(0, 0, 0, 0.04);

  > div[class^="col-"]:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.02);
    border-right: 1px dotted rgba(0, 0, 0, 0.2);
  }

}

.ui-yakabox-btn-icon-right {
  text-align: center;
  text-transform:uppercase;
  text-decoration: none;
  opacity:.6;
  display:table;
  margin:0 auto;
  
  i.fa-plus {
    padding: 15px 15px 13px 15px;
    border-radius: 40px;
    box-shadow: inset 0px 0px 2px #888;
    vertical-align:middle;
  &:before {
    }
  }
  .hidden-xs {
    vertical-align: middle;
    font-size: 20px;
    letter-spacing: 1px;
    margin-left:4px;
  }
  &:hover {
    text-decoration:none;
    opacity:1;
  }
}

.ui-yakabox-dash-widget {
  
  h1,h2,h3,h4,h5 {
    margin-top:10px;
   } 
   
  .ui-yakabox-dash-help-block .alert {
    border-radius: 4px 4px 0 0;
    padding:5px 10px;
    margin-bottom:0px;
  }    
  
  &.ui-yakabox-dash-edit .row {
  border: 1px dotted #aaa;
    border-width: 0 1px 1px;
  }
}

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */ 
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {  } 
/* Medium devices (desktops, 992px and up) */ 
@media (min-width: 992px) { 

}

















/*! =========================================================
 * bootstrap-slider.js
 *
 * Maintainers:
 *		Kyle Kemp
 *			- Twitter: @seiyria
 *			- Github:  seiyria
 *		Rohit Kalkur
 *			- Twitter: @Rovolutionary
 *			- Github:  rovolution
 *
 * =========================================================
  *
 * bootstrap-slider is released under the MIT License
 * Copyright (c) 2017 Kyle Kemp, Rohit Kalkur, and contributors
 * 
 * Permission is hereby granted, free of charge, to any person
 * obtaining a copy of this software and associated documentation
 * files (the...

JavaScript

$('#ex1').slider({
  formatter: function(value) {
    return 'Current value: ' + value;
  }
});
$('#ex2').slider({
  formatter: function(value) {
    return 'Current value: ' + value;
  }
});