JSFiddle - React, Tailwind, and code Playground

by kyllle

HTML

<div class="toolbar--mobile">
  <button class="btn">+</button>
  <!--<nav>-->
    <nav class="tabs">
      <li>
        <a href="">Tab 1</a>
      </li>
      <li>
        <a href="">Tab 2</a>
      </li>
      <li>
        <a href="">Tab 3</a>
      </li>
      <li>
        <a href="">Tab 3</a>
      </li>
      <li>
        <a href="">Tab 3</a>
      </li>
      <li>
        <a href="">Tab 3</a>
      </li>
      <li>
        <a href="">Tab 3</a>
      </li>
    </ul>
  <!--</nav>-->
  <button class="btn">More</button>
</div>

SCSS

body {
  margin: 0;
}

.toolbar--mobile {
  display: flex;
  .btn {
    width: 50px;
    border-radius: 0;
  }
  nav {
    overflow-y: auto;
    display: flex;
    ul {
      margin: 0;
      display: flex;
      white-space: nowrap;
    }
    li {
      // 33% width  
      list-style: none;
      margin: 0;
      padding: 0;
      align-self: center;
      min-width: 80px;
      height: 100%;
    }
    a {}
  }
}

.tabs {
    display: flex;
    position: relative;
    overflow-x: auto;
    overflow-y: hidden;
    height: 48px;
    background-color: #fff;
    margin: 0 auto;
    width: 100%;
    white-space: nowrap;
    padding: 0;
    
    li {
      flex-grow: 1;
      display: block;
      float: left;
      text-align: center;
      line-height: 48px;
      height: 48px;
      padding: 0;
      margin: 0;
      text-transform: uppercase;
      text-overflow: ellipsis;
      overflow: hidden;
      letter-spacing: .8px;
      width: 33.333%;
      min-width: 80px;
      
      a {
        color: #ee6e73;
        display: block;
        width: 100%;
        height: 100%;
        text-overflow: ellipsis;
        overflow: hidden;
        text-decoration: none;
        transition: color .28s ease;
      }
    }
}

JavaScript

console.clear();