JSFiddle - React, Tailwind, and code Playground

by Neo Aptt

HTML

<br/>
<br/>
<br/>
<br/>
<br/>
<div class="container">
    <div class="row newTab">
        <div class="row tabBtn">
            <ol class="checkOL">
                <li role="presentation" class="checkLI"><a href="#">First One</a>
                </li>
                <li role="presentation" class="checkLI"><a href="#">Second One</a>
                </li>
                <li role="presentation" class="checkLI"><a href="#">Third One</a>
                </li>
                <li role="presentation" class="checkLI"><a href="#">Fourth ONe</a>
                </li>
                <li role="presentation" class="checkLI"><a href="#">This is Big</a>
                </li>
                <li role="presentation" class="checkLI"><a href="#">Little More Big</a>
                </li>
                <li role="presentation" class="checkLI"><a href="#">Quick Little</a>
                </li>
                <li role="presentation" class="checkLI"><a href="#">Am Here</a>
                </li>
                <li role="presentation" class="checkLI"><a href="#">Are you search</a>
                </li>
                <li role="presentation" class="checkLI"><a href="#">Get the deal</a>
                </li>
                <li role="presentation" class="checkLI"><a href="#">New One</a>
                </li>
                <li role="presentation" class="checkLI"><a href="#">New One</a>
                </li>
                <li role="presentation" class="checkLI"><a href="#">New One</a>
                </li>
                <li role="presentation" class="checkLI"><a href="#">New One</a>
                </li>
                <li role="presentation" class="checkLI"><a href="#">New One</a>
                </li>
                <li role="presentation" class="checkLI"><a href="#">New One</a>
                </li>
                <li role="presentation" class="checkLI"><a href="#">New One</a>
                </li>
            </ol>
        </div>
    </div>
</div>

CSS

.tabBtn::-webkit-scrollbar-track {
    background-color: #b46868 !important;
}
/* the new scrollbar will have a flat appearance with the set background color */
 .tabBtn::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2) !important;
}
/* this will style the thumb, ignoring the track */
 .tabBtn::-webkit-scrollbar-button {
    background-color: #7c2929 !important;
}
/* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
 .tabBtn::-webkit-scrollbar-corner {
    background-color: black !important;
}
.newTab {
    margin: auto;
    position: relative;
    line-height: 50px;
}
.tabBtn {
    overflow-x: auto;
    scrollbar-face-color: #b46868;
}
.checkOL {
    margin: 0 0 2px 0;
    padding: 0;
    white-space: nowrap;
    display: inline-block;
    list-style: none;
    /*line-height: 50px;*/
}
.checkLI {
    display: inline-block;
    list-style: none;
}
.checkLI {
    padding: 5px 10px;
}
.checkLI a:hover {
    text-decoration: none;
}