JSFiddle - React, Tailwind, and code Playground

by piotku

HTML

<div class="elem">
  Augue adipiscing adipiscing arcu et. Ut, a scelerisque mid? Purus parturient odio enim porta vut elementum turpis vel nunc porttitor pulvinar habitasse, lorem! Nec, proin proin, purus, ac dictumst proin et eu. Magna ridiculus pulvinar, magna pulvinar tortor aliquam ac! Ut massa, adipiscing aenean dis sociis integer et montes, placerat cum velit ultricies pulvinar? Dignissim, arcu porta augue lundium magna lacus a amet pulvinar? Odio, sed, turpis placerat dignissim lorem. Ac sociis, et pulvinar scelerisque sed? Ac purus ut augue dictumst scelerisque porta auctor turpis vel, massa dis mus sed phasellus in dictumst a tincidunt! Hac, pulvinar in aenean sed mus phasellus arcu velit augue turpis amet natoque. Aliquam phasellus! Urna adipiscing dictumst mattis massa? Pulvinar, mattis vel ultricies elit.
</div>

CSS

.elem {
//position: absolute;
transform: translate3d(calc(50vw + 150px), -20%, 0px) matrix3d(0.439651, 0.014391, 0, 0.000036, 
                    -1.269371, -0.186834, 0, -0.004476, 
                    0, 0, 1, 0, 
                    39.011239, 66.295551, 0, 1);
 transform-origin: -414px 0px 0px;
 
 width: 300px;
 height: 300px;
 border: 1px solid #000;
 background-color: #9999ff;
 translate
}
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #ff0000;
}