JSFiddle - React, Tailwind, and code Playground

by imbolc

HTML

<nav role="full-horizontal">
    <ul>
        <li><a href="#">Stream</a>

        </li>
        <li><a href="#">Lab</a>

        </li>
        <li><a href="#">Projects</a>

        </li>
        <li><a href="#">About</a>

        </li>
        <li><a href="#">Contact</a>

        </li>
    </ul>
</nav>​

SCSS

nav[role="full-horizontal"] {
  
    ul {

      list-style:none;
    
      > li {
        position:relative;
        float:left;
        padding:.25em 1em;
        margin:1.25em 1em;
        }

      }
    }
}

/* small screens */
@media screen and (max-width: 640px) {
  nav[role="full-horizontal"] {
    ul {
      padding:0 .5em;
      background: red;
    }
    
    ul > li {
      width:100%;
      padding:.45em .25em;
      margin:0 0 .55em 0;
            background: red;
    }
  }
}