JSFiddle - React, Tailwind, and code Playground

by adouga

HTML

<div class="main">
<div class="a">
    <div class="a1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu neque at arcu eleifend venenatis. Nam vel mauris eu erat condimentum consequat non ut eros. Praesent suscipit eros ac urna tempor vestibulum tincidunt nisl molestie. Duis hendrerit neque ut lacus facilisis congue. Curabitur iaculis, nisi ut congue sagittis, justo lectus elementum dolor, a dapibus lacus ante vel tortor. Fusce vitae ipsum turpis, id laoreet eros. Pellentesque quis diam et mi faucibus fermentum id sit amet metus. Nulla vulputate lectus quis lacus ultricies faucibus.


    </div>
</div>

<div class="b">
    <div class="b1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu neque at arcu eleifend venenatis. Nam vel mauris eu erat condimentum consequat non ut eros. Praesent suscipit eros ac urna tempor vestibulum tincidunt nisl molestie. Duis hendrerit neque ut lacus facilisis congue. Curabitur iaculis, nisi ut congue sagittis, justo lectus elementum dolor, a dapibus lacus ante vel tortor. Fusce vitae ipsum turpis, id laoreet eros. Pellentesque quis diam et mi faucibus fermentum id sit amet metus. Nulla vulputate lectus quis lacus ultricies faucibus.


    </div>
</div>

<div class="c">
    <div class="c1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eu neque at arcu eleifend venenatis. Nam vel mauris eu erat condimentum consequat non ut eros. Praesent suscipit eros ac urna tempor vestibulum tincidunt nisl molestie. Duis hendrerit neque ut lacus facilisis congue. Curabitur iaculis, nisi ut congue sagittis, justo lectus elementum dolor, a dapibus lacus ante vel tortor. Fusce vitae ipsum turpis, id laoreet eros. Pellentesque quis diam et mi faucibus fermentum id sit amet metus. Nulla vulputate lectus quis lacus ultricies faucibus.


    </div>
</div>
</div>

CSS

.main{
 width:500px;
height:500px;
padding:25px;    
}

.a {
    -webkit-perspective: 400px;
    -moz-perspective: 400px;   
    width:100px;
    height:200px;
    float:left;
}
.a1{
 
    width:100%;
    height:100%;
    overflow:scroll;
     -webkit-transform: rotateX(0deg) rotateY(-20deg) translateZ(-20px) translateX(-10px);      
 -moz-transform: rotateX(0deg) rotateY(-20deg) translateZ(-20px) translateX(-10px);      
}

.b {
    width:100px;
    height:200px;
    float:left;
}
.b1{
 
    width:100%;
    height:100%;
    overflow:scroll;  
}

.c {
    -webkit-perspective: 400px;
    -moz-perspective: 400px;   
    width:100px;
    height:200px;
    float:left;
}
.c1{
 
    width:100%;
    height:100%;
    overflow:scroll;
     -webkit-transform: rotateX(0deg) rotateY(20deg) translateZ(-20px) translateX(10px);      
 -moz-transform: rotateX(0deg) rotateY(20deg) translateZ(-20px) translateX(10px);
}