JSFiddle - React, Tailwind, and code Playground

by Q4Dizzy

HTML

<div class="wrap">
  <span class="brick">1</span>
  <span class="brick">2</span>
  <span class="brick">3</span>
  <span class="brick">4</span>
  <span class="brick">5</span>
  <span class="brick">6</span>
  <span class="brick">7</span>
  <span class="brick">8</span>
  <span class="brick">9</span>
  <span class="brick">10</span>
  <span class="brick">11</span>
  <span class="brick">12</span>
  <span class="brick">13</span>
  <span class="brick">14</span>
  <span class="brick">15</span>
  <span class="brick">16</span>
  <span class="brick">17</span>
  <span class="brick">18</span>
  <span class="brick">19</span>
  <span class="brick">20</span>
  <span class="brick">21</span>
  <span class="brick">22</span>
  <span class="brick">23</span>
  <span class="brick">24</span>
  <span class="brick">25</span>
  <span class="brick">26</span>
  <span class="brick">27</span>
  <span class="brick">28</span>
  <span class="brick">29</span>
  <span class="brick">30</span>
  <span class="brick">31</span>
  <span class="brick">32</span>
  <span class="brick">33</span>
  <span class="brick">34</span>
  <span class="brick">35</span>
  <span class="brick">36</span>
  <span class="brick">37</span>
  <span class="brick">38</span>
  <span class="brick">39</span>
  <span class="brick">40</span>
  <span class="brick">41</span>
  <span class="brick">42</span>
  <span class="brick">43</span>
  <span class="brick">44</span>
  <span class="brick">45</span>
  <span class="brick">46</span>
  <span class="brick">47</span>
  <span class="brick">48</span>
  <span class="brick">49</span>
  <span class="brick">50</span>
  <span class="brick">51</span>
  <span class="brick">52</span>
  <span class="brick">53</span>
  <span class="brick">54</span>
  <span class="brick">55</span>
  <span class="brick">56</span>
  <span class="brick">57</span>
  <span class="brick">58</span>
  <span class="brick">59</span>
  <span class="brick">60</span>
  <span class="brick">61</span>
  <span class="brick">62</span>
 ...

SCSS

$brickInRow: 5 !default;
$brickMargin: .2% !default;
$brickWidth: ((100% / $brickInRow) - ($brickMargin * 2));
$nthEvenFirst: $brickInRow + 1;
$nthEvenLast: ($brickInRow * 2) + 1;
* {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.wrap {
  border: 1px solid #000;
  min-width: 300px;
  transform: rotate(180deg);
  .brick {
    border: 1px solid #000;
    width: $brickWidth;
    margin: $brickMargin;
    height: 40px;
    float: right;
    background-color: #ab5555;
    transform: rotate(180deg);
    &:nth-child(#{$nthEvenLast}n + #{$nthEvenFirst}),
    &:nth-child(#{$nthEvenLast}n) {
      width: (($brickWidth / 2) - $brickMargin);
    }
  }
  &:before,
  &:after {
    content: ' ';
    display: table;
  }
  &:after {
    clear: both;
  }
}