JSFiddle - React, Tailwind, and code Playground

by NicoO

HTML

<ul class="inline-list real-inline">
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
      <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 3</a></li>   
        <li><a href="#">Link 3</a></li>        
    </ul>

CSS

.inline-list {
    list-style: none outside none;
    margin: 0 0 0.94444rem -1.22222rem;
    overflow: hidden;
    padding: 0;
}

.inline-list > li {
    display: block;
    float: left;
    list-style: none outside none;
    margin-left: 1.22222rem;
}


.inline-list.real-inline
{
    white-space: nowrap;
    overflow: auto;
}

.inline-list.real-inline  > li
{
    float: none;
    display: inline-block;
}