JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<div class="page">
  <div class="row">
    <div class="box">1</div><div class="box">1</div>
  </div>
  <div class="row">
    <div class="box">2</div><div class="box">2</div>
  </div>
  <div class="row">
    <div class="box">3</div><div class="box">3</div>
  </div>
  <div class="row">
    <div class="box">4</div><div class="box">4</div>
  </div>
  <div class="row">
    <div class="box">5</div><div class="box">5</div>
  </div>
  <div class="row">
    <div class="box">6</div><div class="box">6</div>
  </div>
  <div class="row">
    <div class="box">7</div><div class="box">7</div>
  </div>
  <div class="row">
    <div class="box">8</div><div class="box">8</div>
  </div>
  <div class="row">
    <div class="box">9</div><div class="box">9</div>
  </div>
  <div class="row">
    <div class="box">10</div><div class="box">10</div>
  </div>
  <div class="row">
    <div class="box">11</div><div class="box">11</div>
  </div>
  <div class="row">
    <div class="box">12</div><div class="box">12</div>
  </div>
  <div class="row">
    <div class="box">13</div><div class="box">13</div>
  </div>
  <div class="row">
    <div class="box">14</div><div class="box">14</div>
  </div>
  <div class="row">
    <div class="box">15</div><div class="box">15</div>
  </div>
  <div class="row">
    <div class="box">16</div><div class="box">16</div>
  </div>
  <div class="row">
    <div class="box">17</div><div class="box">17</div>
  </div>
  <div class="row">
    <div class="box">18</div><div class="box">18</div>
  </div>
  <div class="row">
    <div class="box">19</div><div class="box">19</div>
  </div>
  <div class="row">
    <div class="box">20</div><div class="box">20</div>
  </div>
  <div class="row">
    <div class="box">21</div><div class="box">21</div>
  </div>
  <div class="row">
    <div class="box">22</div><div class="box">22</div>
  </div>
  <div class="row">
    <div class="box">23</div><div class="box">23</div>
  </div>
  <div class="row">
    <div class="box">24</div><div...

CSS

#42{
  background-color:pink;
}
* { box-sizing: border-box; }
.page { width: 606px; border: 1px solid red; padding: 2px; }
.row { width: 600px; border: 1px solid blue; overflow: hidden; padding: 2px; margin-bottom: 2px; }
.box { float: left; width: 294px; margin-right: 2px; border: 1px solid green; padding: 20px; font-size: 32px; line-height: 2em; text-align: center; }

@media screen and (max-width: 620px) {
  .page { width: 100%; }
  .row { width: 100%; }
  .box { width: 100%; float: left; margin-bottom: 2px; }
}