JSFiddle - React, Tailwind, and code Playground

by Hugo Vale Pereira

HTML

<div class="a">
  <div class="b">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga natus ut a, magnam neque ipsa sapiente, quisquam est nihil mollitia tempora recusandae aut facere quos repudiandae temporibus cumque quidem perspiciatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga natus ut a, magnam neque ipsa sapiente, quisquam est nihil mollitia tempora recusandae aut facere quos repudiandae temporibus cumque quidem perspiciatis!</div>
</div>
<div class="a">
  <div class="b">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga natus ut a, magnam neque ipsa sapiente, quisquam est nihil mollitia tempora recusandae aut facere quos repudiandae temporibus cumque quidem perspiciatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga natus ut a, magnam neque ipsa sapiente, quisquam est nihil mollitia tempora recusandae aut facere quos repudiandae temporibus cumque quidem perspiciatis!</div>
</div>
<div class="a">
  <div class="b">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga natus ut a, magnam neque ipsa sapiente, quisquam est nihil mollitia tempora recusandae aut facere quos repudiandae temporibus cumque quidem perspiciatis!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga natus ut a, magnam neque ipsa sapiente, quisquam est nihil mollitia tempora recusandae aut facere quos repudiandae temporibus cumque quidem perspiciatis!</div>
</div>

SASS

html
  perspective: 100px
  perspective-origin: 0 0
  height: 100vh
  overflow: scroll
  transform-style: preserve-3d

.a 
  height: 200px
  width: 200px
  border: 1px solid black
  
  margin-bottom: 20px
  overflow: hidden
  transform: translate3d(0,0,30px)
  transform-style: preserve-3d
  
.b
  transform: translate3d(0,10px,-30px)