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://code.jquery.com/jquery-3.1.1.min.js"></script>
<h4>
Dashboard Rows With <span class="red">Splits</span> and <span class="gray">Swaps</span>
 and Borders </h4>
<div class="container ui-yakabox-grid-border">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <button class="btn btn-link ui-yakabox-btn-icon-right">
        <i class="fa fa-plus fa-2x bg-primary"></i> <span class="hidden-sm hidden-xs">Add Widget</span>
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
     <button class="btn btn-link ui-yakabox-btn-icon-right">
        <i class="fa fa-plus fa-2x bg-primary"></i> <span class="hidden-sm hidden-xs">Add Widget</span>
      </button>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
     <button class="btn btn-link ui-yakabox-btn-icon-right">
        <i class="fa fa-plus fa-2x bg-primary"></i> <span class="hidden-sm hidden-xs">Add Widget</span>
      </button>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
     <button class="btn btn-link ui-yakabox-btn-icon-right">
        <i class="fa fa-plus fa-2x bg-primary"></i> <span class="hidden-sm hidden-xs">Add Widget</span>
      </button>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
      <button class="btn btn-link ui-yakabox-btn-icon-right">
        <i class="fa fa-plus fa-2x bg-primary"></i> <span class="hidden-sm hidden-xs">Add Widget</span>
      </button>
    </div>
    <div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
     <button class="btn btn-link ui-yakabox-btn-icon-right">
        <i class="fa fa-plus fa-2x...

SCSS

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

.ui-yakabox-grid-border div[class="row"] {
  border: 1px dotted rgba(0, 0, 0, 0.2);
  margin-top: 15px;




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

}

}
/* 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) { 

.ui-yakabox-grid-border{

div[class^="col-"]:not(:first-child):hover:before {
  font-family: FontAwesome;
  content: "\f07e";
  left: -10px;
  bottom: 50%;
  position: absolute;
  background: gray;
  width: 20px;
  border-radius: 10px;
  color: #fff;
  text-align: center;
  cursor: pointer;
}

div.col-lg-12:after,
div.col-lg-8:after,
div.col-lg-6:after {
  font-family: FontAwesome;
  content: "\f0c4";
  right: 49%;
  bottom: -10px;
  position: absolute;
  background: red;
  border:1px solid red;
  width: 20px;
  border-radius: 10px;
  color: #fff;
  text-align: center;
  cursor: poiner;
}

}

div[class^="col-"]:nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.01);
}



}

.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 18px 13px 19px;
    border-radius: 40px;
    box-shadow: inset 0px 0px 2px #888;
    vertical-align:middle;
  &:before {
    vertical-align:calc(-2px);
    }
  }
  .hidden-xs {
    vertical-align: middle;
    font-size: 20px;
    letter-spacing: 1px;
    maring-left:4px;
  }
  &:hover {
    text-decoration:none;
    opacity:1;
  }
}



.bg-primary span {
  display: table-cell;
  text-align: center;
  font-size: 60px;
  vertical-align: middle
}

.red {
  color: red;
  display: inline
}

.gray {
  color: gray;
  display: inline
}

#smallicons div {
  display: table;
  border-radius:...

JavaScript

<style>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600');
</style>