JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in lectus nisi, at varius turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut pretium est nec turpis tristique vulputate. Quisque libero sed.</div>

<div id="div2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris in lectus nisi, at varius turpis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut pretium est nec turpis tristique vulputate. Quisque libero sed.</div>

CSS

div
{
    position:absolute;
    top:50px;
    left:50px;
width:200px;
height:200px;

border:1px solid black;
    margin-left:50px;
    transform-origin: center center 0;
}
#div1
{
    background: #a90329; /* Old browsers */
background: -moz-linear-gradient(top,  #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* IE10+ */
background: linear-gradient(to bottom,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
    -webkit-transform:rotateX(50deg) rotateY(20deg) rotateZ(15deg);
}
#div2
{
    background:rgba(255,255,255,0.5);
    -webkit-transform:rotate3d(133,32,58,58deg);
}