JSFiddle - React, Tailwind, and code Playground

by koh_edwin

HTML

<div class="container">
  <div class="app-toolbar">
    <div class="row">
      <div class="col-md-12">
        <div class="btn-group">
          <button id="ButtonMetrics-alldata" class="btn btn-default" tabindex="1" aria-label="Button to open the metrics tray">Metrics and Breakdowns⏷</button>
          <button id="ButtonBreakdowns-alldata" class="btn btn-default" tabindex="2" aria-label="Button to open the breakdowns tray">Filters⏷</button>
        </div>
        <button type="button" id="ButtonResetTable-alldata" class="btn btn-default tray-button inline js_no-active" aria-label="Button to reset metrics and breakdowns">Reset table</button>
        <a id="ButtonExport-alldata" class="btn btn-primary pull-right" tabindex="3" aria-label="Button to export the data" filename="download" download="true" href="../../tempcontent/4f1b49c6-daf9-4d97-92a5-c64a7fb4ef71/ccfa041a-455f-4fc2-b707-2d738976ea4c.xlsx?serverNodeId=3d77bbc4-b629-42b1-b27a-bfd93b49633d">Export data</a>
      </div>
    </div>
  </div>

  <div id="DIVMetrics-alldata" class="app-tray collapse in" aria-expanded="true">
    <div class="row">
      <div class="col-md-4 col-sm-12 col-xs-12">
        <legend>Segments</legend>
        <div class="checkbox"><input type="checkbox" id="CheckboxNCD-alldata" name="NCD" value="NCD"><label for="CheckboxNCD-alldata" id="LabelNCD-alldata">Include neurocognitive disorders</label></div>
      </div>

      <div class="col-md-4 col-sm-12 col-xs-12">
        <fieldset>
          <legend id="LegendMetrics-alldata">Metrics</legend>
          <p>Select one or more metrics to show. At least one metric must be selected.</p>
          <div class="checkbox"><a href="#">Select all</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="#">Select none</a></div>
          <div class="checkbox warning"><input type="checkbox" name="metricItem-alldata" id="metricItem-alldata0" value="Percentile 25th"><label for="metricItem-alldata0">Percentile 25th</label></div>
          <div class="checkbox"><input...

CSS

@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css';

.app-toolbar,
.app-toolpanel {
  padding: 8px;
  background-color: #eeeeee;
}

.app-toolbar {
  border-bottom: 1px solid #cccccc;
}

.app-formbar {
  padding-bottom: 0px;
}

.app-tray {
  padding: 8px;
  background-color: #eeeeee;
  /*border-top: 1px solid #cccccc;
  box-shadow: inset 0 8px 8px -8px rgba(0,0,0,0.25);*/
}

.app-tray-toolbar {
  border-top: 1px solid #cccccc;
  padding-top: 8px;
}

.app-toolbar .row,
.app-toolpanel .row {
  margin-left: -4px;
  margin-right: -4px;
}

.app-toolbar [class*="col-"],
.app-toolpanel [class*="col-"] {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.app-toolbar .form-group {
  margin-bottom: 8px;
}

.app-toolpanel .form-group {
  margin-bottom: 16px;
}

.app-toolpanel {
  background-color: #ffffff;
}

.radio,
.checkbox {
/*  margin-top:8px;
  margin-bottom:8px; */
  display: flex;
  margin-top: 0px;
  margin-bottom: 16px;
}

.radio label,
.checkbox label {
  padding-left: 8px;
}

.radio input[type=radio],
.checkbox input[type=checkbox] {
  position: relative;
  margin: 0;
  margin-top: 3px;
}

legend {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 5px;
  border-bottom-color: #cccccc;
}

.radio.warning label,
.checkbox.warning label {
  color: #a94442;
}
.radio.warning label::after,
.checkbox.warning label::after {
  font-family: FontAwesome;
  content: " \f071";
}