JSFiddle - React, Tailwind, and code Playground
HTML
<!doctypehtml><html class=state-modal><meta content=scrolltabs name=description><meta content="initial-scale=1,width=device-width,maximum-scale=1,user-scalable=no"name=viewport><meta content=yes name=apple-mobile-web-app-capable><title>scrolltabs</title><style>.scrollport{position:fixed;top:0;left:0;width:560px;height:200px;overflow:scroll;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;overscroll-behavior:contain;scrollbar-width:none;visibility:hidden;--scroll-port-height:200px;--scroll-port-width:560px;--scroll-bar-width:1rem;--scroll-factor:1;--scroll-factor-wide:1;--scroll-thumb-height:calc(var(--scroll-port-height) / var(--scroll-factor));--scroll-thumb-width:calc(var(--scroll-port-width) / var(--scroll-factor-wide));--scroll-factor-used:calc(1 / (1 + var(--scroll-factor)));--scroll-factor-wide-used:calc(1 / (1 + var(--scroll-factor-wide)))}.scrollport::-webkit-scrollbar{height:0;width:0}.scrollbox{width:max-content;min-height:100%;display:flex;flex-flow:row-reverse;justify-content:stretch;align-content:stretch}.scrollcontent{flex:1 1 auto}.scrolltrack-h{height:calc(var(--scroll-port-height));position:sticky;top:calc(200px - var(--scroll-bar-width));right:var(--scroll-bar-width);width:calc(var(--scroll-port-width) - var(--scroll-bar-width));margin-left:calc(-1 * var(--scroll-port-width));height:var(--scroll-bar-width);margin-top:calc(-1 * var(--scroll-bar-width));background-color:rgba(255,255,255,.5)}.scrolltrack{height:calc(var(--scroll-port-height));position:sticky;top:38px;right:0;width:var(--scroll-bar-width);margin-left:calc(-1 * var(--scroll-bar-width));background-color:rgba(255,255,255,.5)}.scrollbar{position:-webkti-sticky;position:sticky;right:0;perspective:1px;width:var(--scroll-bar-width);margin-left:calc(-1 * var(--scroll-bar-width))}.scrollbar-h{z-index:9999;order:9999;perspective:1px;height:calc(var(--scroll-port-height));position:-webkti-sticky;position:sticky;top:calc(200px -...