JSFiddle - React, Tailwind, and code Playground

by GioLogist

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css">
<script src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<link rel="stylesheet" href="https://www.gamestash.com/assets/css/fonts.css">
<ul class="games-browse-navigation">
  <li><a href="#" class="games-browse-navigation__link">Top Downloads</a></li>
  <li><a href="#" class="games-browse-navigation__link">Action</a></li>
  <li><a href="#" class="games-browse-navigation__link">Categories</a></li>
  <li><a href="#" class="games-browse-navigation__link">Another navigation</a></li>
  <li><a href="#" class="games-browse-navigation__link">Another navigation</a></li>
  <li><a href="#" class="games-browse-navigation__link">Another navigation</a></li>
</ul>

SCSS

$games-browse-navigation-link-heights: (27px, 54px);
$games-browse-navigation-link-font-sizes: (14px, 18px);

.games-browse-navigation {
  margin: 15px 0;
  list-style: none;
  padding: 0;

  li {
    display: inline-block;
  }
}
a.games-browse-navigation__link {
  outline: 0;
  margin: 0 5px 5px 0;
  display: inline-block;
  background-color: #640e81;
  color: #fff;
  font-family: 'Gotham-Book';
  font-size: nth($games-browse-navigation-link-font-sizes,2);
  line-height: nth($games-browse-navigation-link-heights,2);
  border-radius: nth($games-browse-navigation-link-heights,2);
  text-decoration: none;
  padding: 0 30px;
  @media (max-width: 480px) {
    font-size: nth($games-browse-navigation-link-font-sizes,1);
    line-height: nth($games-browse-navigation-link-heights,1);
    border-radius: nth($games-browse-navigation-link-heights,1);
  }
}

JavaScript

$(".games-browse-navigation").slick({
  arrows: false,
  dots: false,
  infinite: false,
  speed: 300,
  slidesToShow: 1,
  variableWidth: true
});