JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

<script src="https://raw.github.com/LeaVerou/prefixfree/master/prefixfree.min.js"></script>
<!doctype html>
<html>
    <head>
    </head>
    <body>
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
        <div id="div4"></div>
    </body>
</html>

CSS

div{
    width: 30px;
    height: 30px;
    border: 2px solid black;
}

#div1{
    position: absolute;
    top: 10px;
    left: 10px;
    transform: rotate(45deg);
}

#div2{
    transform: translate(200px,10px);
}

#div3{
    transform: translate(10px,100px) scale(1.5);
}

#div4{
    transform: translate(200px,20px) skew(30deg,20deg);    
}