JSFiddle - React, Tailwind, and code Playground

by hhcofcmds

HTML

<div id="scrollable">
    <!--svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <image xlink:href="https://placekitten.com/g/512/512" width="512px" height="512px" top="0px" left="0px"></image>
        <image xlink:href="https://placekitten.com/g/512/512" width="512px" height="512px" y="0" x="512"></image>
    </svg-->
    <div id="first">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <image xlink:href="https://placekitten.com/g/512/512" width="512px" height="512px" top="0px" left="0px"></image>
    </svg>
    </div>
    <div id="second">    
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <image xlink:href="https://placekitten.com/g/512/512" width="512px" height="512px" y="0" x="0"></image>
    </svg>
        </div>
</div>

CSS

#scrollable {
    width: 512px;
    height: 512px;
    overflow-x: auto;
    overflow-y: hidden;
}
svg {
    width: 2048px;
    height: 512px;
}
svg image {
    position: absolute;
}
#first, #second {
    position: absolute;
    top: 0px;
}
#first {
    left: 0px;
    background: red;
}
#second {
    left: 512px;
    background: green;
}