JSFiddle - React, Tailwind, and code Playground

Sticky CLASS

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">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<h2>
 Bar Chart Config
</h2>

<form class="form-horizontal"><div class="form-group"><label class="control-label col-xs-4">Data Source</label><div class="col-xs-8"><select type="text" id="data_choice" class="form-control ybx-graph-config ybx-graph-select-field"><option value="reportui_0">Row 0 Cell 0 Widget 0</option></select></div></div><div class="form-group"><label class="control-label col-xs-4">Height:</label><div class="col-xs-8"><input type="text" class="form-control ybx-graph-config" id="pixelHeight" placeholder="350"></div></div><div class="form-group"><label class="control-label col-xs-4">X Axis Selector:</label><div class="col-xs-8"><select type="text" id="DimensionSelector" class="form-control ybx-graph-config ybx-graph-select-field"><option value="ResourceName">Item Name</option></select></div></div><div class="form-group"><label class="control-label col-xs-4">X Axis Label:</label><div class="col-xs-8"><input type="text" class="form-control ybx-graph-config" id="DisplaySelector"></div></div><div class="form-group"><label class="control-label col-xs-4">Y Axis Counter:</label><div class="col-xs-8"><select...

CSS

@import url(//fonts.googleapis.com/css?family=Open+Sans:400,700,300);
  @import url(//fonts.googleapis.com/css?family=Oswald:400,700,300);
  * {
    font-family: 'Open Sans';
    color: gray;              
  }



.sticky {
  position: fixed;
  right: 0;
  z-index: 150;
  transform: rotate(5deg);
  width: 200px;
  min-height: 150px;
  margin: -10px 10px 10px;
  padding: 10px;
  font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive;
  font-size: 14px;
  color: #000;
  background: rgba(255, 255, 51, 0.8);
  box-shadow: -2px 2px 2px rgba(0,0,0,0.3);
  bottom:20%;

}
.sticky:before, .sticky:after {
  content: "";
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  right: 0;
}
.sticky:before {
  border-top: solid 8px #fff;
  border-right: solid 8px #fff;
  border-left: solid 8px transparent;
  border-bottom: solid 8px transparent;
}
.sticky:after {
  border-bottom: solid 8px #dddd33;
  border-left: solid 8px #dddd33;
  border-right: solid 8px transparent;
  border-top: solid 8px transparent;
}