JSFiddle - React, Tailwind, and code Playground

by jorgeluis

HTML

<div class="is-flex flex-direction-column page">

  <header class="header">Header</header>
  
  <div class="tabs-wrapper">
  
    <div class="b-tabs is-vertical">
      <nav class="tabs">
        <ul>
          <li class="is-active">
            <a>tab 1</a>
          </li>
          <li class="">
            <a>tab 2</a>
          </li>
        </ul>
      </nav>

      <section class="tab-content">
        <div class="tab-item">
          <p>tab item 1</p>
          <p>tab item 1</p>
          <p>tab item 1</p>
          <p>tab item 1</p>

        </div>
        <div class="tab-item">
          tab item 2
        </div>
      </section>
    </div>
    
  </div>

</div>

CSS

body {
  margin: 0;
  padding: 0;
}
.is-flex {
    display: flex;
}
.flex-direction-column {
    flex-direction: column;
}
.page {
  min-height: 100vh;
}

.header {
  flex: 0;
  background: pink;
  padding: 1rem;
}

.tabs-wrapper {
  flex: 1;
  display: flex;
}
.b-tabs.is-vertical {
    display: flex;
    flex-direction: row;
    background-color: beige;
    flex-grow: 1;
}
.tabs {
  border-right: solid 1px var(--grey-lighter, #ddd);
  flex-shrink: 0;
}
.tab-content {
  flex-grow: 1;
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
}
.tab-item {
  flex-shrink: 0;
  flex-basis: auto;
}