JSFiddle - React, Tailwind, and code Playground

by mqchen

HTML

<div class="row-wrap">
    <div class="row-upper">
        <div class="box-wrap">
            <div class="box">
                <div class="box-inner">Hello</div>
            </div>
        </div>
        <div class="box-wrap">
            <div class="box">
                <div class="box-inner">Hello</div>
            </div>
        </div>
        <div class="box-wrap">
            <div class="box">
                <div class="box-inner">Hello</div>
            </div>
        </div>
        <div class="box-wrap">
            <div class="box">
                <div class="box-inner">Hello</div>
            </div>
        </div>
    </div>
    <div class="row-lower">
        <div class="box-wrap">
            <div class="box">
                <div class="box-inner">Lower</div>
            </div>
        </div>
        <div class="box-wrap">
            <div class="box">
                <div class="box-inner">Lower</div>
            </div>
        </div>
        <div class="box-wrap">
            <div class="box">
                <div class="box-inner">Lower</div>
            </div>
        </div>
    </div>
</div>
<div class="row-wrap">
    <div class="row-upper">
        <div class="box-wrap">
            <div class="box">
                <div class="box-inner">Hello</div>
            </div>
        </div>
        <div class="box-wrap">
            <div class="box">
                <div class="box-inner">Hello</div>
            </div>
        </div>
        <div class="box-wrap">
            <div class="box">
                <div class="box-inner">Hello</div>
            </div>
        </div>
        <div class="box-wrap">
            <div class="box">
                <div class="box-inner">Hello</div>
            </div>
        </div>
    </div>
    <div class="row-lower">
        <div class="box-wrap">
            <div class="box">
                <div class="box-inner">Lower</div>
            </div>
        </div>
        <div class="box-wrap">
            <div...

CSS

.row-wrap {
    text-align: center;
    position: relative;
    float: left;
}
.row-upper, .row-lower {
    overflow: auto;
    clear: both;
    width: 100%;
}
.row-lower {
    overflow: visible;
    position: absolute;
    bottom: 0;
}
.row-lower .box {
    margin-left: 64.644660941%;
    margin-top: 64.644660941%;
}

.box-wrap {
    float: left;
    width: 200px;
    height: 200px;
}

.box {
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);

    -webkit-box-sizing: border-box;    
    box-sizing: border-box;

    overflow: hidden;
    
    width: 70.710678118%; /* x = sqrt(x^2 / 2) = x / sqrt(2) = 0.70710678118 */
    height: 70.710678118%;
    margin: 14.644660941%;
    
    border: 1px solid white;
}

.box-inner {
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);

    -webkit-transform-origin: center center;    
    transform-origin: center center;
    
    -webkit-box-sizing: border-box;    
    box-sizing: border-box;
    
    width: 141.421356237%;
    height: 141.421356237%;
    margin: -20.7106781185% 0 0 -20.7106781185%;
    
    background-color: #666;
    color: white;
    padding: 40%;
}