JSFiddle - React, Tailwind, and code Playground

by Felype Rennan

HTML

<div>
<ul>
<li class="btn-exp">₢</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>

SCSS

body {
  margin: 0;
  font-family: "Segoe UI", "Verdana", sans-serif;
}

ul {
  margin: 0;
  padding: 0;
  display: flex;
  width: 100vw;
  flex-flow: row nowrap;
  background: #048;
  height: 50px;
  > li {
    display: block;
    padding: 0 16px;
    color: #f2f2f2;
    font-size: 1.1rem;
    height: 50px;
    line-height: 50px;
    cursor: pointer;
    &.btn-exp {
      display: none;
    }
    &:hover { 
      background: #f2f2f2;
      color: #048;
    }
  }
  
  @media(max-width: 400px) {
    flex-flow: column;
    background: #f2f2f2;
    height: 50px;
    line-height: 50px;    
    overflow:hidden;
    > li {
      background: #048;
      height: 50px;
      line-height: 50px;
      &.btn-exp {
        height: 50px - 8px;
        line-height: 50px - 8px; 
        display: block;
        width: 50px;
        border-radius: 8px;
        margin: 4px;
        padding: 0;
        text-align: center;
      }
      width: 100vw;
    }
  }
}