JSFiddle - React, Tailwind, and code Playground

by Mehmet Yener

HTML

<div class="block"> 
    <clear></clear>
    <div class="greenBoxes"></div>
    <clear></clear>
    <div class="greenBoxes"></div>
    <clear></clear>
    <div class="greenBoxes"></div>
    <clear></clear>
    <div class="greenBoxes"></div>
    <clear></clear>
    <div class="greenBoxes"></div>
    <clear></clear>
</div>

<!--
if (iIndex % 2 == 0 && iIndex > 0)
{
    @Html.Raw("</div>");
    @Html.Raw("<div class='row' style='margin-top:30px;margin-right: -34px;'>");
}

IF LOOP VARIABLE CAN BE DIVIDED BY 2 WHICH MEANS LINE MUST BE END WITH </DIV>
2,4,6,8,10,12...........................[PAGINATION]
->

CSS

.block{
    width:80%;
    min-height:100px;
    background-color:gray;
    padding:0px;
}

.Mobileblock{
    width:30%;
    min-height:100px;
    background-color:gray;
    padding:0px;
}
.greenBoxes{
    width:14%;
    height:70px;
    margin-top:15px;
    background-color:green;
    float:left;
    padding:0px;
}

clear{
    width:5%;
    height:100px;
    float:left;
    padding:0px;
}