JSFiddle - React, Tailwind, and code Playground

by thebabydino

HTML

<div class='item item-1'>
    <div class='box original'>original</div>
    <div class='box rotated final'>rotated</div>
</div>
<div class='item item-2'>
    <div class='box'></div>
    <div class='box rotated'></div>
    <div class='box rotated translatedX final'>rotated <strong>and then</strong> translated (<code>translateX</code>)</div>
</div>
<div class='item item-3'>
    <div class='box'></div>
    <div class='box rotated'></div>
    <div class='box rotated scaledX final'>rotated <strong>and then</strong> scaled (<code>scaleX</code>)</div>
</div>
<div class='item item-4'>
    <div class='box'></div>
    <div class='box rotated'></div>
    <div class='box rotated skewedX final'>rotated <strong>and then</strong> skewed (<code>skewX</code>)</div>
</div>
<div class='item item-5'>
    <div class='box'></div>
    <div class='box rotated'></div>
    <div class='box rotated translatedY final'>rotated <strong>and then</strong> translated (<code>translateY</code>)</div>
</div>
<div class='item item-6'>
    <div class='box'></div>
    <div class='box rotated'></div>
    <div class='box rotated scaledY final'>rotated <strong>and then</strong> scaled (<code>scaleY</code>)</div>
</div>
<div class='item item-7'>
    <div class='box'></div>
    <div class='box rotated'></div>
    <div class='box rotated skewedY final'>rotated <strong>and then</strong> skewed (<code>skewY</code>)</div>
</div>
<div class='item item-8'>
    <div class='box'></div>
    <div class='box rotated'></div>
    <div class='box rotated translated final'>rotated <strong>and then</strong> translated (<code>translate</code>)</div>
</div>
<div class='item item-9'>
    <div class='box'></div>
    <div class='box rotated'></div>
    <div class='box rotated scaled final'>rotated <strong>and then</strong> scaled (<code>scale</code>)</div>
</div>
<div class='info info-1'>
    <div class='ani'></div>
    <div class='txt'>
        <p>The element is rotated by 30 degrees:</p>
        <pre><code><span...

CSS

body { overflow: hidden; margin: 0; padding: 1em 0 5em; }
.item {
    display: inline-block;
    position: relative;
    padding: 3em;
    width: 8em; height: 4em;
}
.box {
    position: absolute;
    border: dashed 1px;
    width: inherit; height: inherit;
    color: grey;
    line-height: 1;
}
.box:before, .box:after {
    position: absolute;
    z-index: -1;
    font: italic 1em monospace;
}
.box:before {
    top: 50%; right: -3em; left: -3em;
    border-top: inherit;
    text-align: right;
    content: 'x(+)';
}
.box:after {
    top: -3em; bottom: -3em; left: 50%;
    border-left: inherit;
    line-height: 20;
    content: 'y(+)';
}
.rotated {
    -webkit-transform: rotate(30deg); /* Chrome, Safari */
    -moz-transform: rotate(30deg); /* Firefox 3.5-15 */
    -ms-transform: rotate(30deg); /* IE9 */
    -o-transform: rotate(30deg); /* Opera 10.5-12.0 */
    transform: rotate(30deg); /* IE10, Firefox 16+, Opera 12.1+ */
}
.final {
    border: solid 1px;
    background: rgba(106,90,205,.4);
    color: black;
    letter-spacing: 1px;
}
.final strong { color: crimson; font-weight: 900; }
.skewedX {
     -webkit-transform: rotate(30deg) skewX(30deg); /* Chrome, Safari */
    -moz-transform: rotate(30deg) skewX(30deg); /* Firefox 3.5-15 */
    -ms-transform: rotate(30deg) skewX(30deg); /* IE9 */
    -o-transform: rotate(30deg) skewX(30deg); /* Opera 10.5-12.0 */
    transform: rotate(30deg) skewX(30deg); /* IE10, Firefox 16+, Opera 12.1+ */
}
.item-4 .rotated:not(.skewedX):before, 
.item-3 .rotated:not(.scaledX):before, 
.item-3 .rotated:not(.scaledX):after, 
.skewedY:after, 
.item-6 .rotated:not(.scaledY):before{ content: ''; }
.translatedX {
     -webkit-transform: rotate(30deg) translateX(-56%); /* Chrome, Safari */
    -moz-transform: rotate(30deg) translateX(-56%); /* Firefox 3.5-15 */
    -ms-transform: rotate(30deg) translateX(-56%); /* IE9 */
    -o-transform: rotate(30deg) translateX(-56%); /* Opera 10.5-12.0 */
    transform: rotate(30deg)...