<style>
/* TODO: add Turbo CSS support for this */
.mode-ND3FKTFGHI::-webkit-scrollbar {
display:none;
}
</style>
<div class="t1 p-16 mode-scrolled- mode-scrolling-">
<div class="t1 relative">
<div class="t1 pr-20">
<div class="t1 max-h-200 overflow-y-scroll mode-ND3FKTFGHI">
<p class="t1 mb-16">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor, nisi ac ultricies varius, ipsum risus interdum tellus, et venenatis arcu mauris a metus. Quisque nec sollicitudin mauris, quis interdum libero. Donec posuere dui at augue suscipit, eu egestas neque molestie. Cras felis mi, pellentesque quis tempus id, bibendum ac risus. Aliquam leo urna, efficitur eget urna eu, mattis aliquet risus. Morbi mauris lorem, facilisis id scelerisque eget, eleifend at erat. Phasellus porta dui at lorem egestas scelerisque. Maecenas hendrerit, ante at ullamcorper varius, lorem orci rhoncus neque, non tincidunt ante lectus vel lectus. Nullam ut massa in libero maximus eleifend sed a lorem. Donec a lorem aliquam, pretium turpis ut, consequat nunc. Vivamus auctor tellus vel justo laoreet, quis auctor leo euismod. Suspendisse potenti. Nulla orci mauris, elementum et semper eu, varius non tortor.</p>
<p class="t1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porttitor, nisi ac ultricies varius, ipsum risus interdum tellus, et venenatis arcu mauris a metus. Quisque nec sollicitudin mauris, quis interdum libero. Donec posuere dui at augue suscipit, eu egestas neque molestie. Cras felis mi, pellentesque quis tempus id, bibendum ac risus. Aliquam leo urna, efficitur eget urna eu, mattis aliquet risus. Morbi mauris lorem, facilisis id scelerisque eget, eleifend at erat. Phasellus porta dui at lorem egestas scelerisque. Maecenas hendrerit, ante at ullamcorper varius, lorem orci rhoncus neque, non tincidunt ante lectus vel lectus. Nullam ut massa in libero maximus eleifend sed a lorem. Donec a lorem aliquam, pretium turpis ut, consequat nunc. Vivamus auctor tellus vel justo laoreet, quis auctor leo euismod. Suspendisse potenti. Nulla orci mauris, elementum et semper eu, varius non tortor.</p>
</div>
<div class="t1 mode-scrolled:///hidden absolute bottom-0 left-0 right-0 h-72 pointer-events-none">
<div class="t1 block h-40 bg-size-100%-100% opacity-95" style="background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABkCAQAAADtJZLrAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAJklEQVQY02NgYGD4z8zEAERMOEg8UngUkGoUVcynxMEE7GL4/w8AL6sEuueX05QAAAAASUVORK5CYII=')"></div>
<div class="t1 flex flex-center-end w-full h-32 bg-c-white-95">
<div class="t1 flex flex-center color-gray-900 px-8 py-2 rounded-3 font-14">
scroll
<svg class="t1 w-12 h-12 fill-current ml-4" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.172L2.929 10.1l-1.414 1.414L10 20l.707-.707 7.778-7.778-1.414-1.414L11 16.17V0H9z" fill-rule="evenodd"/></svg>
</div>
</div>
</div>
</div>
<div class="t1 absolute top-0 right--4 bottom-0 w-14 transition opacity-100 mode-scrolled://opacity-0 mode-scrolling://opacity-100 mode-scrolled://hover:opacity-100">
<div class="t1 absolute inset-0 p-4">
<div class="t1 h-full w-6 bg-c-black-5 rounded-full"></div>
</div>
<div class="t1 absolute top-0 right-0 w-full h-40% p-4">
<div class="t1 h-full w-6 bg-c-black-40 hover:/bg-c-black-60 rounded-full"></div>
</div>
</div>
</div>
</div>