HTML
<nav class="ph3 ph5-ns pv4">
<div class="nowrap overflow-x-auto">
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 1">Link 1</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 2">Link 2</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 3">Link 3</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 4">Link 4</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 5">Link 5</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 6">Link 6</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 7">Link 7</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 8">Link 8</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 9">Link 9</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 10">Link 10</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 11">Link 11</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 12">Link 12</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 13">Link 13</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 14">Link 14</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 15">Link 15</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 16">Link 16</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 17">Link 17</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 18">Link 18</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 19">Link 19</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 20">Link 20</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 21">Link 21</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 22">Link 22</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 23">Link 23</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 24">Link 24</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 25">Link 25</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 26">Link 26</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 27">Link 27</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 28">Link 28</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 29">Link 29</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 30">Link 30</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 31">Link 31</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 32">Link 32</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 33">Link 33</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 34">Link 34</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 35">Link 35</a>
<a class="link dim gray f5 f4-ns dib mr3" href="#" title="Link 36">Link 36</a>
</div>
</nav>
css
.dib {
display: inline-block;
}
.link {
text-decoration: none;
transition: color .15s ease-in;
}
.link:link, .link:visited {
transition: color .15s ease-in;
}
.link:hover {
transition: color .15s ease-in;
}
.link:active {
transition: color .15s ease-in;
}
.link:focus {
transition: color .15s ease-in;
outline: 1px dotted currentColor;
}
.overflow-x-auto {
overflow-x: auto;
}
.gray {
color: #777;
}
.pv4 {
padding-top: 2rem;
padding-bottom: 2rem;
}
.ph3 {
padding-left: 1rem;
padding-right: 1rem;
}
.mr3 {
margin-right: 1rem;
}
.f5 {
font-size: 1rem;
}
.nowrap {
white-space: nowrap;
}
.dim {
opacity: 1;
transition: opacity .15s ease-in;
}
.dim:hover, .dim:focus {
opacity: .5;
transition: opacity .15s ease-in;
}
.dim:active {
opacity: .8;
transition: opacity .15s ease-out;
}
@media screen and (min-width: 30em) {
.ph5-ns {
padding-left: 4rem;
padding-right: 4rem;
}
.f4-ns {
font-size: 1.25rem;
}
}