JSFiddle - React, Tailwind, and code Playground

by Gereltod Gotsbayar

HTML

<div class="cross-container"></div>
<div class="cross-container"></div>
<div class="cross-container"></div>
<div class="cross-container"></div>
<div class="cross-container"></div>
<div class="cross-container"></div>

CSS

.cross-container {
    height: 60px;
    width: 60px;
    position: relative;
    background-color: #0f0;
    float: left;
    margin-right: 10px;
}
.lvl1, .lvl2, .lvl3{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 60px;
    width: 60px;
}
.lvl1 {
    left: -30px;
    border-right: 1px solid blue;
    transform: skew(45deg,0deg);
    -ms-transform: skew(45deg,0deg); /* IE 9 */
    -webkit-transform: skew(45deg,0deg); /* Safari and Chrome */
    -o-transform: skew(45deg,0deg); /* Opera */
    -moz-transform: skew(45deg,0deg); /* Firefox */
}
.lvl2 {
    left: -30px;
    border-right: 1px solid blue;
    transform: skew(-45deg,0deg);
    -ms-transform: skew(-45deg,0deg); /* IE 9 */
    -webkit-transform: skew(-45deg,0deg); /* Safari and Chrome */
    -o-transform: skew(-45deg,0deg); /* Opera */
    -moz-transform: skew(-45deg,0deg); /* Firefox */
}
.lvl3 {
    width: 30px;
    background-color: #0f0;
}

.odd-cross .lvl3 {
    position: absolute;
    right: 0px !important;
    width: 30px;
}

JavaScript

$(function(){
    
    
    $(".cross-container:odd").addClass("odd-cross");

    $(".cross-container").append("<div class='lvl1'></div>")
                         .append("<div class='lvl2'></div>")
                         .append("<div class='lvl3'></div>");
    
    
});