JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<div class="demos">
    
    <div id="multi">
        Inspect me!
    </div>
    <div id="rotate">
        
    </div>
    
</div>

<div style="width: 60px;height: 150px;margin: 10px 60px;padding: 10px;border: 1px solid #F66;background: #ccc; transform: skew(10deg) scale(1.5, 1.1) rotate(-10deg) translate(-10px, 20px);">Inspect me!</div>

CSS

.demos {
    margin: 0 70px;
    text-align: right;
}
.demos div {
    width: 60px;
    height: 150px;
    margin: 10px 60px;
    padding: 10px;
    border: 1px solid #F66;
    background: #ccc;
    display: inline-block;
}
#rotate {
    transform: rotate(45deg);
}
#multi {
    transform: skew(10deg) scale(1.5, 1.1) rotate(-10deg) translate(-10px, 20px);
}