JSFiddle - React, Tailwind, and code Playground

by k_rma

HTML

<div class="tdiv">1</div>
<div class="tdiv">2</div>
<div class="tdiv">3</div>
<div class="tdiv">4</div>
<div class="tdiv">5</div>
<div class="tdiv">6</div>
<div class="tdiv">7</div>
<div class="tdiv">8</div>
<div class="tdiv">9</div>
<div class="tdiv">10</div>
<div class="tdiv">11</div>
<div class="tdiv">12</div>
<div class="tdiv">13</div>
<div class="tdiv">14</div>
<div class="tdiv">15</div>
<div class="tdiv">16</div>

CSS

@media (min-width: 32px) and (max-width: 479px) {
    .tdiv {
        clear:left;
    }
}
@media (min-width: 480px) and (max-width: 745px) {
    .tdiv:nth-child(2n+1) {
        clear:left;
    }
    .tdiv:nth-child(n+13) {
        display:none;
    }
}
@media (min-width: 746px) and (max-width: 959px) {
    .tdiv:nth-child(3n+1) {
        clear:left;
    }
    .tdiv:nth-child(n+13) {
        display:none;
    }
}
@media (min-width: 960px) {
    .tdiv:nth-child(4n+1) {
        clear:left;
    }
}

.tdiv {
    float:left;
    height:30px;
    margin:5px;
    border-bottom:1px solid red;
    width:100px;
    background-color:#f5f5f5;
}

JavaScript

/*$('.tdiv').find("tr td:nth-last-child(-n+3)").remove();*/

/* how can i remove border from last 4 elements */