JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
<div id="myWorkContent">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    
</div><!-- end myWorkContent -->
</div>

CSS

span {
    display: inline-block;
    width:200px;
    height:200px;
    border:1px solid black;
}
#main {
    height: 240px;
    overflow: hidden;
}
#myWorkContent{
    width:530px;
    height:250px;
    border: 13px solid #bed5cd;
    overflow-y: hidden;
    overflow-x: scroll;
    white-space: nowrap;
}
#myWorkContent a {
    display: inline;
}

html{
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}