Stacked Semantic Segments: https://codepen.io/mjgartendev/pen/MXQqav

index.html

<div class="ui segments" id="app">
  <div id="app-header" class="ui segment layout">
    <i>AppHeader</i>
  </div>
  <div id="app-content" class="ui segment layout">
    <i>AppContent</i>
    <div id="nuxt" class="ui segment page">
      <i>VueStudio | VueFinder | Resources | Showcase</i>
      <div class="ui horizontal segments" id="components">
        <div class="ui segment">
          <i>VueEditor | DataEditor | UiDesign</i>
          <div class="ui segments">
            <div class="ui segment">
              <i>ScriptPanel</i>
            </div>
            <div class="ui segment">
              <i>StylePanel</i>
            </div>
            <div class="ui segment">
              <i>TemplatePanel</i>
            </div>
          </div>
        </div>
        <div class="ui segment">
          <i>Preview | Config File | Dataset </i>
          <div class="ui segments">
            <div class="ui segment">
              <i>PreviewPanel</i>
            </div>
            <div class="ui segment">
              <i>DevtoolsPanel</i>
            </div>
          </div>
        </div>
        <div class="ui segment">
          <i>Tasks | Context | Stats</i>
          <div class="ui segments">
            <div class="ui segment">
              <p>1. choose a theme</p>
            </div>
            <div class="ui segment">
              <p>2. come up with idea</p>
            </div>
            <div class="ui segment">
              <p>3. build</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
<div class="ui segment app-layout" id="command-panel">
  <i>CommandPanel</i>
</div>
<div class="ui segment app-layout" id="status-bar">
  <i>StatusBar</i>
</div>
</div>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.js"></script>

stacked-semantic-segments.markdown

Stacked Semantic Segments

A Pen by Michael Garten on CodePen.

License.

style.scss

#components {
  background-color: #f1f1f1;
  color: #35495e;
}
#app-header, #app-content, #command-panel, #status-bar{
  background-color: #35495e;
  color: #f1f1f1;
  font-weight: bold;
  border: 1px solid #ccc;
}
#nuxt {
  background-color: #41b883;
  font-weight: bold;
  color: #35495e
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.css" rel="stylesheet" />