JSFiddle - React, Tailwind, and code Playground

by flyingL123

HTML

<div class="categoryHeader-sub">
  <div class="categoryHeader-fade"></div>
  <ul class="categoryHeader-nav">
	  <li class="categoryHeader-navItem"><a href="/sup-racks/">SUP Racks</a></li>
	  <li class="categoryHeader-navItem"><a href="/sup-bags/">SUP Bags</a></li>
	  <li class="categoryHeader-navItem"><a href="/sup-board-carriers/">SUP Board Carriers</a></li>
	  <li class="categoryHeader-navItem"><a href="/sup-accessories/">SUP Accessories</a></li>
	  <li class="categoryHeader-navItem"><a href="/sup-paddles/">SUP Paddles</a></li>
          <li class="categoryHeader-navItem"><a href="/sup-paddles/">SUP Paddles</a></li>
          <li class="categoryHeader-navItem"><a href="/sup-racks/">SUP Racks</a></li>
	  <li class="categoryHeader-navItem"><a href="/sup-bags/">SUP Bags</a></li>
	  <li class="categoryHeader-navItem"><a href="/sup-board-carriers/">SUP Board Carriers</a></li>
	  <li class="categoryHeader-navItem"><a href="/sup-accessories/">SUP Accessories</a></li>
	  <li class="categoryHeader-navItem"><a href="/sup-paddles/">SUP Paddles</a></li>
          <li class="categoryHeader-navItem"><a href="/sup-paddles/">SUP Paddles</a></li>
  </ul>
</div>

CSS

.categoryHeader-sub {
      position: relative;
      padding: 1rem;
      background-color: #f8f8f8;
      margin-left: -0.625rem;
      margin-right: -0.625rem; }
      @media screen and (min-width: 37.0625em) {
        .categoryHeader-sub {
          margin-left: -0.78125rem;
          margin-right: -0.78125rem; } }
      @media screen and (min-width: 59.5em) {
        .categoryHeader-sub {
          margin-left: -0.9375rem;
          margin-right: -0.9375rem; } }
      @media screen and (min-width: 59.5em) {
        .categoryHeader-sub {
          margin-left: 0;
          margin-right: 0;
          background-color: transparent;
          padding-bottom: 0px; } }

    .categoryHeader-nav {
      list-style-type: none !important;
      margin: 0;
      overflow: auto;
      white-space: nowrap;
      padding-bottom: 1px;
      text-align: center;
      -webkit-overflow-scrolling: touch; }
      .categoryHeader-nav::before, .categoryHeader-nav::after {
        content: ' ';
        display: table; }
      .categoryHeader-nav::after {
        clear: both; }
      @media screen and (min-width: 59.5em) {
        .categoryHeader-nav {
          white-space: normal; } }

    .categoryHeader-navItem {
      display: inline-block;
      margin-right: 10px; }
      @media screen and (min-width: 59.5em) {
        .categoryHeader-navItem {
          margin-bottom: 1rem; } }
      .categoryHeader-navItem a {
        display: inline-block;
        text-align: center;
        line-height: 1;
        cursor: pointer;
        -webkit-appearance: none;
        transition: background-color 0.25s ease-out, color 0.25s ease-out;
        vertical-align: middle;
        border: 1px solid transparent;
        border-radius: 0px;
        padding: 0.85em 1em;
        margin: 0 0 1rem 0;
        font-size: 0.9rem;
        border: 1px solid #8a8a8a;
        color: #8a8a8a;
        margin-bottom: 0; }
        [data-whatinput='mouse'] .categoryHeader-navItem a {
          outline: 0; }
 ...