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="menu">

  <div class="row">
    <div class="col-sm-6 col-sm-offset-2 text-center">
      <h4 class="text-center">
No Grid is configured for the Dashboard. <br>Action Graphs are locked. 
</h4>
      <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="widgetCarouse2" 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...

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;
}

.ui-yakabox-dash-help-block .alert {
  padding: 0;
  padding-top: 6px;
  border: 0;
  margin-bottom: 0;
}

.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: 230px;
  position: relative;
}

.row.ui-inverse .carousel-inner {
  min-height: 230px !important;
}

.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;
}

.ui-inverse .tooltip-inner {
  background-color: orange;
}

.col-no-padding {
  padding: 0;
}

.ui-yakabox-dash-widget-content {
  background-color: #fff;
  background-color: #fff;
  border: 1px solid #ececec;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 15px;
  margin-top: -1px;
}

.ui-yakabox-widget-config {
  display: none;
}


}
.ui-inverse .carousel-inner {
  min-height: 230px...

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) {
  $(this).closest('.menu').find('.ybx-widget-menu').toggle();
});
$('.ybx-config-widget').click(function(e) {
  $(this).closest('.menu').find('.ui-yakabox-widget-config').toggle();
});





$('.nogrid').click(function(e) {
  e.preventDefault();
  e.stopPropagation();

  alert('THIS WILL BE A PRETTY MODAL. Action Graphs are available when at least 1 Data Grid has been added to a page');

});

$('#data_choice').change(function() {
  if ($('#data_choice').val() == 'hidden') {
    $('.configFilters_link').show();
    $('.grid-prefs').hide();

  } else {
    $('.configFilters_link').hide();
    $('.grid-prefs').show();
  }
});


$('[data-toggle="tooltip"]').tooltip();