JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<div>
    <div class="iconblock">1</div>
    <div class="textblock">1</div> 
    
    <div class="iconblock">2</div> 
    <div class="textblock">2</div> 
    
    <div class="iconblock">3</div> 
    <div class="textblock">3</div> 
    
    <div class="iconblock">4</div> 
    <div class="textblock">4</div> 
    
    <div class="iconblock">5</div> 
    <div class="textblock">5</div> 
    
    <div class="iconblock">6</div> 
    <div class="textblock">6</div> 
    
    <div class="iconblock">7</div>
    <div class="textblock">7</div>
    
    <div class="iconblock">8</div>
    <div class="textblock">8</div>
    
    <div class="iconblock">9</div>
    <div class="textblock">9</div>
    
    <div class="iconblock">10</div>
    <div class="textblock">10</div>
    
    <div class="iconblock">11</div>
    <div class="textblock">11</div>
    
    <div class="iconblock">12</div>
    <div class="textblock">12</div> 
</div>

CSS

.iconblock{width:82px; height:82px; background:#ccc; float:left; margin:10px; position:relative;}
.textblock{width:100%; height:auto; background:red; display:block; padding:10px; position:relative; display:none;}
.iconblock1{width:82px; height:82px; background:#ccc; float:left; margin:10px; position:relative;}

div.iconblock {
    background: -moz-linear-gradient(0% 100% 90deg, #BFBFBF, #E3E3E3) repeat scroll 0 0 transparent;
    border-color: #E3E3E3 #E3E3E3 #9B9B9C;
    color: #999;
    text-shadow: 1px -1px 1px #fff;
    box-shadow: 0 1px 4px -1px #ccc;
    border: 1px solid;
    border-radius: 10px 10px 10px 10px;
    font-size: 13px;
    font-weight: bold;
    padding:5px;
    text-align: center;
}

JavaScript

$('.iconblock, .textblock').each(function(){
        var offset = $(this).offset();
        if(offset.top > 10 ){
            var _this = $(this);
            _this.addClass('nextRow_0');            
            _this.removeClass('nextRow_1').removeClass('nextRow_2'); 
        }
        if(offset.top > 20 ){
            var _this = $(this);
            _this.addClass('nextRow_1');
            _this.removeClass('nextRow_2').removeClass('nextRow_0');            
        }
        if(offset.top > 240){
            var _this = $(this);
            _this.removeClass('nextRow_1').removeClass('nextRow_0');
            _this.addClass('nextRow_2');
        }
        
        var attrClass = $(this).attr('class').replace("iconblock", "");
        $(this).text(attrClass);
        
    });