JSFiddle - React, Tailwind, and code Playground

by Yang Tyler

HTML

<div class="outer-ctner">
    <div class="inner-ctner">
        <div class="item">
    <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span>
        </div>
        <div class="item">
    <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span>
        </div>
        <div class="item">
    <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span>
        </div>
        <div class="item">
    <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span> <span>test</span>
        </div>
    </div>
</div>

CSS

.outer-ctner{
    width: 30%;
    overflow-y: hidden;
    overflow-x: scroll;
    
}
.inner-ctner{
    width: 9999px;
    margin:0px;
padding:0px;

}
span{
    float:left;
    margin: 0 10px;
}