JSFiddle - React, Tailwind, and code Playground

Activity Widget Toolbar

by chrischilcoat

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="row ui-yakabox-dash-toolbar navbar-default">
  <div class="btn-group" style="margin-left: 16px;">
    <button type="button" class="btn btn-default dropdown-toggle btn-xs" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" style="min-width: 100px;">
      Forms
      <span class="caret"></span></button>
    <div class="dropdown-menu" style="padding:0 10px;">
      <div class="checkbox">
        <label>
          <input type="checkbox" checked="checked" value=""> Defects
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" checked="checked" value=""> Acceptance Test
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" checked="checked" value=""> Backlog Item
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input type="checkbox" checked="checked" value=""> Feature
        </label>
      </div>


    </div>
  </div>
  <span>
    <strong>Size:</strong> 
    <input type="range" style="position:relative; top:3px;"/>
  </span>
  <label for="inputEmail3" class="" value="Style">
    <input type="checkbox" name="sDisplay" id="sDisplay" value="">
    <!-- react-text: 1035 -->&nbsp;Collapse
    <!-- /react-text -->
  </label>
  <label for="inputEmail3" class="" value="Style">
    <input type="checkbox" name="sDisplay" id="sDisplay" value="defaultChecked">
    <!-- react-text: 1038 -->&nbsp;Custom Title
    <!-- /react-text -->
  </label>
  <div class="btn-group pull-right" role="group">
    <button class="btn btn-link " title=""><i class="fa fa-wrench ui-yakabox-widget-flip-to-back" title="Config"></i><span class="">...

SCSS

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */

@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
  margin: 10px;
}

.label-as-badge {
  padding: 8px 10px;
  font-size: 13px;
  .fa-times-circle {
    color: white;
    margin-left: 5px;
  }
}

.input-group {
  margin-bottom: 10px;
}

JavaScript

$('.btn-group').on('click', function(e) {
  $('.dropdown-menu').show();
})