JSFiddle - React, Tailwind, and code Playground

Bootstrap 3 Jquery Yakabox

by DugSohn

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://yakabod.yakabox.com/custom/css/cache/6fdc3a856a26e706a3edad566422a903.css?yakabox-vne-5.21.4-1">
<body class="ui-app ui-global-nav ui-app-inverse ui-app-dash  ui-workflow-manager" ui-app-id="39" role="application">
  <nav class="navbar navbar-inverse navbar-fixed-top no-border-radius" id="main_navbar" role="navigation">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button>
        <a class="navbar-brand" href="/activityViewer"><img src="https://yakabod.yakabox.com/images/yakaboxHeaderLogo.png" class="img-responsive"> <span class="bold text-white">Yakabod</span></a> </div>
      <div class="collapse navbar-collapse" id="navbar-collapse-1">
        <ul class="nav navbar-nav navbar-left">
          <li class="ui-yakabox-globalnav-search-lg navbar-form-expanded navbar-form navbar-left visible-lg-block visible-md-block visible-xs-block" role="search">
            <div class="ui-yakabox-searchBox  ui-helper-clearfix">
              <form onsubmit="return false;">
                <div class="input-group  bias-input-group" style="padding-top:3px;">
                  <input class="ybx-searchBox-text form-control input-sm" placeholder="Enter Keywords">
                  <div class="ybx-searchBox-wrapper input-group-btn bs-dropdown-to-select-group">
                 ...

SCSS

.ui-yakaimage {

display: inline-block;
background-color: rgba(0,0,0,.2);
box-shadow: inset 0 0 2px rgba(0,0,0,.6);

}

.ui-yakabox-dropdown-menu-browse>.fa-caret-up {
    position: absolute;
    right: 46%;
    top: 0;
    font-size: 50px;
    top: -30px;
    text-align: center;
    color: #222;
    max-width: 400px;
    margin-right: auto;
    margin-left: auto;
}

.ui-builder {
  
  .form-group {
    border-top: none;
  }
    
.row.ui-builder-has-layout > div[class^="col-"] {
    box-shadow: inset 15px 0 0 #f5f5f5, inset -15px 0 0 #f5f5f5, inset 0 15px 0 #f5f5f5, inset 0 -15px 0 #f5f5f5;
    background-color: #fff;
    border: 1px solid #eee;
    padding: 15px 0;
    text-align:left;
    flex:1 0 0 ;
    min-height:40px
    }
    
    .row > div[class^="col-"] > .row {
    margin: -15px 0;
    }
    
    .row {
    display:flex;
    flex-direction:row;
}
}

.btn-tilebar {
  

    
    .fa { 
    display:block;
  }
      



 .btn-tile {
      padding:20px;
      width:125px;
      height:125px;

  }
  
  .btn-tile-sm {
    height: 25px;
    transition: height ease-in .05s;
    padding: 13px;
    line-height:1px;
  }
  
  
  }

JavaScript

$('.btn-tile').click(function() {
  var $this = $(this);

  $this.closest('.btn-tilebar').find('.fa').toggle();
  $this.closest('.btn-tilebar').find('.btn-tile').toggle();

  $this.closest('.btn-tilebar').find('.btn-back').toggle();

});

$('.btn-back').click(function() {
  var $tileBar = $('.btn-tilebar');
  var $this = $(this);
  

  $tileBar.find('.fa').toggle();
  $tileBar.closest('.btn-tilebar').find('.btn-tile').toggle();
  
  $(this).closest('.panel-collapse').removeClass('in');

});

$('.btn-select-form').click( function() {
  var $this = $(this);
 
  var $lable = $(this).html();
 
 
 $('.form-group-template').clone().appendTo(".new-form-group").removeClass('form-group-template').find('.control-label').html($lable);
 
});