JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<body ng-app="myApp">
  <div ng-controller="MainCtrl" style="height:100%;">
    <div class="authorised-pane">
      <div ng-controller="PanelCtrl" style="height:100%;">
        <div id="flexWrapper">
          <span class="version">Version</span>
          <span class="panel-selection-style">
                <!-- Buttons for panel selection, ie. choose content -->
                  <button class="navButton">
                    Button 1
                  </button>
                  <button class="navButton">
                    Button 2
                  </button>
                  <button class="navButton">
                    Button 3
                  </button>
                  <button class="navButton">
                    Button 4
                  </button>
                  <button class="navButton">
                    Button 5
                  </button>
                </span>

          <div ng-show="panelCtrl.tabs.graph" style="height:100%;">
            <div class="graphCtrl" ng-controller="GraphCtrl" ng-include="graph.html" style="height:100%;">

              <!--now inside ng-included graph.html-->
              <span class="instrumentControls">
                      <button class="navButton">
                        Instrument Control 1
                      </button>
                      <button class="navButton">
                        Instrument Control 2
                      </button>

                            <!--contents of a replay toolbar directive-->
                      <span>
                      <button></button>
                      <button></button>
                      </span>
              <span>
                      <button>></button>
                      <button>>></button>
                      </span>

              <!--End of instrument controls -->
              </span>

              <!-- contents of chart directive -->
              <div class="chartControls">
                <button class="navButton">
       ...

CSS

html,
body {
  height: 100%;
  margin: 0;
}

.app {
  height: 100%;
}

.authorised-pane {
  height: 100%;
}

#flexWrapper {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-content: stretch;
  min-height: 100%;
  /*height or min-height both work */
}

.version {
  padding: 5px;
  color: #777777;
  font-size: 0.8em;
}

.panel-selection-style {
  background-color: green;
  display: flex;
  flex-basis: 32px;
}

.navButton {
  padding: 5px;
}

.instrumentControls {
  display: flex;
  background-color: orange;
  flex-basis: 32px;
}

.chartControls {
  display: flex;
  background-color: blue;
  flex-basis: 32px;
}

#chart {
  background-color: yellow;
  flex: 50;
  display: flex;
  flex-basis: 400px;
  height: 100%;
}


/*additional css*/

.graphCtrl {
  display: flex;
  flex-direction: column;
}