JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="layout">
  <div><div class="box"></div></div>
  <div><div class="box"></div></div>
  <div><div class="box"></div></div>
</div>

CSS

.layout {
    margin-left: -10px;
    margin-right: -10px;
}
.layout:after {
    content: "";
    display: table;
    clear: both;
}
.layout > * {
    box-sizing: border-box;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
    float: left;
}
.layout > :nth-child(2), .layout > :nth-child(n+3) {
    width: 50%;
}
.layout > :nth-child(1) {
    width: 100%;
}
.layout > :nth-child(2) {
    clear: both;
}
@media (min-width: 640px) {
    .layout > :nth-child(2), .layout > :nth-child(n+3) {
        width: 25%;
    }
    .layout > :nth-child(2) {
  position: relative;
        _left: 25%;
        margin-left: 25%;
        clear: none;
    }
    .layout > :nth-child(n+3) {
  position: relative;
        _left: -25%;
        margin-left: -50%;
    }
    .layout > :nth-child(1) {
        width: 50%;
    }
}

.layout {
  content-reset: items;
}

.layout > * {
  counter-increment: items;
}

.box {
  background-color: red;
  margin-top: 20px;
  position: relative;
}

.box:before {
  positon: absolute;
  content: counter(items);
  color: #FFF;
  padding: 10px;
  display: inline-block;
}

.box:after {
  content: "";
  display: block;
  padding-bottom: 56.25%;
}