JSFiddle - React, Tailwind, and code Playground

by MrPolywhirl

HTML

<div id="output">

CSS

.col {
    float: left;
}
.rotate {
    /* Rotate */
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    /* Older versions of IE */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.transform3 {
    -webkit-transform-origin: 65% 100%;
    -moz-transform-origin: 65% 100%;
    -ms-transform-origin: 65% 100%;
    -o-transform-origin: 65% 100%;
    transform-origin: 65% 100%;    
}
.transform4 {
    -webkit-transform-origin: 70% 110%;
    -moz-transform-origin: 70% 110%;
    -ms-transform-origin: 70% 110%;
    -o-transform-origin: 70% 110%;
    transform-origin: 70% 110%;
}
.transform5 {
    -webkit-transform-origin: 80% 120%;
    -moz-transform-origin: 80% 120%;
    -ms-transform-origin: 80% 120%;
    -o-transform-origin: 80% 120%;
    transform-origin: 80% 120%;
}
.transform6 {
    -webkit-transform-origin: 85% 136%;
    -moz-transform-origin: 85% 136%;
    -ms-transform-origin: 85% 136%;
    -o-transform-origin: 85% 136%;
    transform-origin: 85% 136%;
}
.transform7 {
    -webkit-transform-origin: 90% 150%;
    -moz-transform-origin: 90% 150%;
    -ms-transform-origin: 90% 150%;
    -o-transform-origin: 90% 150%;
    transform-origin: 90% 150%;
}
.v_text_wrapper {
    width: 100px;
    height: 150px;
    background: #AAA;
    border: solid #222 1px;
    padding 0;
    margin: 0;
}
.v_text {
    color: #444;
    font-family: monospace;
    font-weight: bold;
    font-size: 2.5em;
}

JavaScript

for (var i = 3; i <= 7; i++) {
    var wrapper = $('<div />').addClass('v_text_wrapper col');
    var v_text = $('<div />').addClass('v_text rotate transform' +i);
    
    var text = '';
    for (var j = 0; j < i; j++) {
        text += i;
    }
    
    v_text.text(text);
    
    wrapper.append(v_text);    
    $('#output').append(wrapper);
}