JSFiddle - React, Tailwind, and code Playground

by mathijsflietstra

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/FitText.js/1.1/jquery.fittext.min.js"></script>
<div>
    <div class="container">
        <div>ABCDEFGHIJKLMNO</div>
        <div>ABCDEF</div>
        <div>ABCDEFGHIJKLMNO</div>
        <div>HELLO</div>
        <div>QRSTUVWXWZABC</div>
        <div>DEFGHIJKL</div>
    </div>
    <img src="https://dl.dropboxusercontent.com/u/6928212/threebytwo.png" />
</div>

CSS

html, body {
    width:100%;
    height: 100%;
    font-family:"Arial Black", "Arial Bold", Gadget, sans-serif;
}
body > div {
    position: relative;
}
img {
    display: block;
    width: 100%;
}
div.container {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    border: 1px dashed black;
    overflow: hidden;
}
div.container > div {
    width: 100%;
    position: absolute;
    line-height: 1em;
    background-color: #FFF;
}
div.container > div:nth-child(even) {
    -webkit-transform:rotate(-90deg);
    -webkit-transform-origin: 0 0;
    transform:rotate(-90deg);
    transform-origin: 0 0;
    -moz-transform:rotate(-90deg);
    -moz-transform-origin: 0 0;
    bottom: -1em;
}
div.container > div:nth-child(odd) {
    z-index: 1;
}
div:nth-child(3) {
    top: 1.1em;
    left: 1.6em;
}
div.container > div:nth-child(4) {
    left: 1em;
}
div.container > div:nth-child(5) {
    -webkit-transform: scale(1, 2);
    -moz-transform: scale(1, 2);
    transform: scale(1, 2);
    top: 2.8em;
    left: 3.8em;
}
div.container > div:last-child {
    -webkit-transform: rotate(0deg) scale(1, 2);
    -moz-transform: rotate(0deg) scale(1, 2);
    transform: rotate(0deg) scale(1, 2);
    top: 2.3em;
    left: 2.3em;
}

JavaScript

$(function () {
    $("div.container > div:nth-child(1)").fitText(1.15);
    $("div.container > div:nth-child(2)").fitText(0.8);
    $("div.container > div:nth-child(3)").fitText(1.31);
    $("div.container > div:nth-child(4)").fitText(0.75);
    $("div.container > div:nth-child(5)").fitText(1.46);
    $("div.container > div:nth-child(6)").fitText(0.9);
})