JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.12/jquery.transit.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...

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-xs-"]: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;
  }
}

/*  flipper stuff */

 * entire container, keeps perspective */ .ui-yakabox-dash-widget-flip-container {
 perspective: 1000;
 -webkit-perspective: 1000;
 position:relative;
}
.ui-yakabox-dash-widget-flip-container, .ui-yakabox-dash-widget-front, .ui-yakabox-dash-widget-back {
  z-index: 5
}

.ui-yakabox-dash-widget-front, .ui-yakabox-dash-widget-back {
  position: absolute;
  top: 0px;
  left: 0px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
}
.ui-yakabox-dash-widget-front {
  z-index: 2;
  /* for firefox 31 */
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  width:100%;
  height:125px;
}

.ui-yakabox-dash-widget-flip-container {
  position: relative;
  height:185px;
  width:100%
}
 .ui-yakabox-dash-widget-back {
  transform: rotateX(180deg);
  -webkit-transform:...

JavaScript

$(".ui-yakabox-flip").click(function () {

             oFlip = $('.ui-yakabox-dash-widget-flip');

 $("div.ui-yakabox-dash-widget-flip", ".ui-yakabox-dash-widget-flip-container").stop().transition({
                    rotateX: '-180deg'
                }, 700, function () {
                    $("oFlip").stop().transition({
                        rotateX: 0
										});
});
});

  $(".ui-yakabox-flip-back").click(function () {
 $("div.ui-yakabox-dash-widget-flip", ".ui-yakabox-dash-widget-flip-container").stop().transition({
                rotateX: '0deg'
            });
});




$('.fa-align-center, .fa-align-middle, .fa-align-left').click( function() {
		alert('click');
});
$('#ex1').slider({
  formatter: function(value) {
    return 'Current value: ' + value;
  }
});
$('#ex2').slider({
  formatter: function(value) {
    return 'Current value: ' + value;
  }
});