JSFiddle - React, Tailwind, and code Playground

by sas_sam

HTML

<header class='navigation-example'>
  <ul class='navigation scroll'>
    <li class='nav-item'>Blog</li>
    <li class='nav-item'>Portfolio</li>
    <li class='nav-item'>Downloads</li>
    <li class='nav-item'>About</li>
    <li class='nav-item'>Contact</li>
  </ul>
</header>

SCSS

* {
  box-sizing: border-box;
}

body {
  max-width: 300px;
  margin: 5% auto;
  color: #64cce3;
  line-height: 1.5;
}
/*
.scroll {
  white-space: nowrap;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}
*/

.navigation-example {
  width: 100%;
  height: 50px;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  background: #152637;

  .navigation {
    position: absolute;
    top: 0;
    left: 0;
    right: -15px;
    overflow: auto;
    width: 10000px;
    height: 50px;
    margin: 0;
  }
}

.nav-item {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  padding: 13px 16px 12px;
}
.nav-item:not(:last-child) {
  border-right: 1px solid rgba(114, 124, 135, 0.2);
}