JSFiddle - React, Tailwind, and code Playground

by mmansion

HTML

<div id="container">
<div class="block-item">1</div>
<div class="block-item">2</div>
<div class="block-item">3</div>
<div class="block-item">4</div>
<div class="block-item">5</div>
<div class="block-item">6</div>
<div class="block-item">7</div>
<div class="block-item">8</div>
<div class="block-item">9</div>
<div class="block-item">10</div>
<div class="block-item">11</div>
<div class="block-item">12</div>
<div class="block-item">13</div>
<div class="block-item">14</div>
<div class="block-item">15</div>
<div class="block-item">16</div>
<div class="block-item">17</div>
<div class="block-item">18</div>
</div>

CSS

.block-item {
    width:50px;
    height:50px;
    margin:0px 0px 0px 0px;
    display:block;
    float:left;
    background:#fff;
    overflow:hidden;
    cursor:pointer;
    border:1px solid #000;
    clear:both;
    }

JavaScript

$("#container").append($(".block-item").get().reverse());