JSFiddle - React, Tailwind, and code Playground

by mobidevelop

HTML

<div class="wrap-3">
    <article class="category-1">
    1
    </article>
    <article class="category-1">
    1
    </article>
    <article class="category-2">
    2
    </article>
    <article class="category-1">
    1
    </article>
    <article class="category-3">
    3
    </article>
    <article class="category-2">
    2
    </article>
    <article class="category-3">
    3
    </article>
    <article class="category-1">
    1
    </article> 
</div>

<p>Other Content</p>

<div class="wrap">
    <article class="category-1">
    1
    </article>
    <article class="category-1">
    1
    </article>
    <article class="category-2">
    2
    </article>
    <article class="category-1">
    1
    </article>
    <article class="category-3">
    3
    </article>
    <article class="category-2">
    2
    </article>
    <article class="category-3">
    3
    </article>
    <article class="category-1">
    1
    </article> 
</div>

CSS

.wrap {
    max-width: 1140px;
}

.wrap .column-1, .wrap .column-2, .wrap .column-3 {
    float: left;
    width: 33.333333%;
}

.wrap .column-1 {
    background: #f00;
}

.wrap .column-2 {
    background: #0f0; 
}

.wrap .column-3 {
    background: #00f; 
}

.wrap > div > article {
    margin: 0 5%;
}

/* For modern browsers */
.wrap:before, .wrap:after {
    content:"";
    display:table;
}

.wrap:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.wrap {
    zoom:1;
}
@media screen and (max-width: 480px) {
.wrap .column-1, .wrap .column-2, .wrap .column-3 {
    float: none;
    width: auto;
}
}

JavaScript

$('.wrap').each
(
    function(index)
    {
        var self = $(this);
        $('<div class="column-1" />').appendTo(self).append(self.find('.category-1'));
        $('<div class="column-2" />').appendTo(self).append(self.find('.category-2'));
        $('<div class="column-3" />').appendTo(self).append(self.find('.category-3')); 
    }
)