JSFiddle - React, Tailwind, and code Playground

by mqchen

HTML

<div class="diamonds">
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
    <div class="item">Hello</div>
</div>

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

CSS

.diamonds {
    text-align: center;
    overflow: visible;
    white-space: nowrap;
    float: left;
    outline: 1px solid red;
}

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

.diamond-box-wrap {
    float: left;
    width: 250px; /** Size of diamonds */
    height: 250px;
}

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

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

    overflow: hidden;
    
    position: relative;
    z-index: 1;
    
    width: 70.5%;
    height: 70.5%;
    margin: 14.75%;
    
    border: 0.5px solid transparent;
}
    .diamond-box:hover {
        opacity: 0.7;
    }

.diamond-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.5%;
    height: 141.5%;
    margin: -20.5% 0 0 -20.5%;
    
    /** Demo props */
    background-color: #666;
    color: white;
    padding: 40%;
}

JavaScript

var Diamond = function(wrapSelector, itemSelector) {
    this.wrapEl = this._getElements(wrapSelector)[0];
    this.itemsEl = this._getElements(itemSelector, this.wrapEl);
    
    // Item wrap element
    this.itemWrapEl = this._createNestedElements([
        {tag : "div", attributes : {"class" : "diamond-box-wrap"}},
        {tag : "div", attributes : {"class" : "diamond-box"}},
        {tag : "div", attributes : {"class" : "diamond-box-inner"}}
    ]);
    console.debug(this.itemWrapEl);
};

Diamond.prototype._createNestedElements = function(props) {
    var outEl = [];
    for(var i = 0; i < props.length; i++) {
        var el = document.createElement(props[i]["tag"]);
        for(var attrName in props[i]["attributes"]) {
            if(props[i]["attributes"].hasOwnProperty(attrName)) {
                el.setAttribute(attrName, props[i]["attributes"][attrName]);
            }
        }
        // Put this inside the previous element, if exists
        if(outEl.hasOwnProperty(i - 1)) {
            outEl[i - 1].appendChild(el);
        }
        outEl.push(el);
    }
    return outEl;
};

Diamond.prototype._getElements = function(selector, parent) {
    parent = parent || document;
    return parent.querySelectorAll(selector);
};

Diamond.prototype._wrapItem = function(itemEl) {
    
};

Diamond.prototype.setSize = function(size) {
    this.size = size;
};

Diamond.prototype.setGap = function(gap) {
    this.gap = gap;
};

Diamond.prototype.render = function() {
    
};



var d = new Diamond(".diamonds", ".item");
console.debug(d.itemsEl);
d.setSize(250);
d.setGap(0.5);
d.render();