JSFiddle - React, Tailwind, and code Playground

by Felype Rennan

HTML

<ul class="custom-nav">
  <li>Opção 1</li>
  <li>Opção 2</li>
  <li>Opção 3</li>
  <li>Opção 4</li>
  <li>Opção 5</li>
</ul>

SCSS

/**
Isso aqui tá em SASS
http://sass-lang.com/
**/

.custom-nav {
  list-style: none;
  padding: 0;
  display: flex;
  flex-flow: row;
  > li {
    height: 46px;
    line-height: 46px;
    display: block;
    padding: 0 12px;
    margin-right: 4px;
    cursor: pointer;
    border: 1px dashed red;
    @media screen and (max-width: 400px) {
      border: 1px dashed blue;
      padding: 0 4px;
      margin-right: 2px;
      font-size: 0.8em;
    }
  }
}