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">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.css">
<script src="https://momentjs.com/downloads/moment.js"></script>
<link rel="stylesheet" href="https://yakabod.yakabox.com/css/scss/themes/darkly/ui_dark.css">
<br>
<div class="row">
  <div class="col-sm-6 col-sm-offset-2 text-center">
<button class="btn btn-primary ybx-widget-add"><i class="fa fa-plus"></i>
Add Widget
</button>
</div>
</div>
<div class="row ybx-widget-menu">
  <div class="col-sm-6 col-sm-offset-2">
  <div class="text-center">
   <i class="fa fa-caret-up"></i>
  </div>
    <div class="row ui-inverse">
      <div id="widgetCarousel" class="carousel slide">
        <div class="carousel-inner">
          <div class="item active">
            <div class="ui-widgets">
              <div class="col-md-4 col-sm-4 col-xs-6"><span class="btn btn-link btn-block" title="Data Grid"><i class="fa fa-list fa-2x fa-fw"></i><div>Data Grid</div></span></div>
              <div class="col-md-4 col-sm-4 col-xs-6"><span class="btn btn-link btn-block" title="Headline"><i class="fa fa-font fa-2x fa-fw"></i><div>Headline</div></span></div>
              <div class="col-md-4 col-sm-4 col-xs-6"><span class="btn btn-link btn-block" title="Text Area"><i class="fa fa-align-left fa-2x fa-fw"></i><div>Text Area</div></span></div>
              <div class="col-md-4 col-sm-4 col-xs-6"><span class="btn btn-link btn-block" title="Activity Viewer"><i class="fa fa-rss fa-2x fa-fw"></i><div>Activity Viewer</div></span></div>
              <div class="col-md-4 col-sm-4 col-xs-6"><span class="btn btn-link btn-block" title="Documents"><i class="fa fa-file-text fa-2x...

CSS

.ybx-widget-menu {
  display:none;
}
.ui-inverse a:hover,
.ui-inverse a:focus,
.ui-inverse .btn-link:hover {
  text-decoration: none;
}
.ybx-widget-menu .text-center {
  height:15px;
}
.fa-caret-up {
    font-size: 60px;
    line-height: 18px;
    height: 19px;
    overflow: hidden;
    }
.ui-inverse .btn-block:hover {
  background-color: #000;
}

.row.ui-inverse {
  padding: 20px 20px 10px 20px;
  min-height: 200px;
  position: relative;
}

.ui-circle-step {
  border: 2px solid #fff;
  border-radius: 15px;
  padding: 5px;
  width: 25px;
  height: 25px;
  display: inline-block;
  font-size: 15px;
  line-height: 12px;
  color: #fff;
}

.col-bottom.carousel-indicators {
  position: absolute;
  bottom: 2px;
  left: 0;
  width: 100%;
  margin-left: 0
}

#widgetCarousel {
  min-height: 200px;
}

.ui-inverse .carousel-indicators .active {
  margin: 0;
  width: 12px;
  height: 12px;
  background-color: transparent;
  color: #fff;
}

.ui-inverse .carousel-indicators .active .fa {
  color: transparent;
}

.ui-inverse .carousel-indicators .active,
.ui-inverse a,
.ui-inverse a:hover,
.ui-inverse a:focus {
  display: inline-block;
  width: 120px;
}
.ui-crossfilters .alert {
  position:absolute;
  width:100%;
  top:25px;
  z-index: 2;
  background-color:rgba(255,136,1,0.9	)
}
.ui-inverse .carousel-inner {
    min-height: 200px;
}
.ui-esc.pull-right {
  position:absolute;
  top:5px;
  right: 5px;
}

JavaScript

$('.ui-esc').click( function() {
 $(this).parent().hide();
});

$( document ).on( 'keydown', function ( e ) {
    if ( e.keyCode === 27 ) { // ESC
         $('.ui-crossfilters .alert').hide();
    }
});

$('.ybx-widget-add').click( function(e) {
    $('.ybx-widget-menu').toggle();
});