JSFiddle - React, Tailwind, and code Playground

by iurevych

HTML

<div class="row">
    <div class="test-module">Header</div>
</div>

<div class="row">
    <div class="col1of4">
      <div class="test-module">
          <div class="another-module">Navigation</div>
          <div class="another-module">Navigation</div>
          <div class="another-module">Navigation</div>
      </div>
    </div>
    <div class="col1of2">
      <div class="test-module">
          <div class="row">
              <div class="col2of3">
                  <div class="another-module">Content</div>
              </div>
              <div class="col1of3">
                  <div class="another-module">Content</div>
              </div>
          </div>
          
          <div class="row">
              <div class="col1of2">
                  <div class="another-module">Content<br/>Content<br/>Content<br/></div>
              </div>
              <div class="col1of2">
                  <div class="another-module">Content<br/>Content<br/>Content<br/></div>
              </div>
          </div>
          
          <div class="row">
              <div class="col1of3">
                  <div class="another-module">Content</div>
              </div>
              <div class="col1of3">
                  <div class="another-module">Content</div>
              </div>
              <div class="col1of3">
                  <div class="another-module">Content</div>
              </div>
          </div>
      </div>
    </div>
    <div class="col1of4">
      <div class="test-module">
          <div class="another-module">Info</div>
          <div class="another-module">Info<br/>Info<br/>Info<br/></div>
      </div>
    </div>
</div>

<div class="row">
    <div class="test-module">Footer</div>
</div>

CSS

body {
  padding: 10px;
}

/* The clearfix hack is a popular way to contain floats without resorting 
 * to using presentational markup.
 * Credits: http://nicolasgallagher.com/micro-clearfix-hack */
.row {
  *zoom: 1;
}
 
.row:before,
.row:after {
  display: table;
  content: "";
  line-height: 0;
}
 
.row:after {
  clear: both;
}
 
/* Reserved classes for columns */
.col1of2,
.col1of3, .col2of3,
.col1of4, .col2of4, .col3of4,
.col1of5, .col2of5, .col3of5, .col4of5,
.col1of6, .col2of6, .col3of6, .col4of6, .col5of6 {
  float: left;
}

.col1of2 {
  width: 50%;
}

.col1of3 {
  width: 33.33333%;
}

.col2of3 {
  width: 66.66666%;
}

.col1of4 {
  width: 25%;
}

.col3of4 {
  width: 75%;
}

.col1of5 {
  width: 20%;
}

.col2of5 {
  width: 40%;
}

.col3of5 {
  width: 60%;
}

.col4of5 {
  width: 80%;
}

.col1of6 {
  width: 16.66666%;
}

.col2of6 {
  width: 33.33333%;
}

.col3of6 {
  width: 50%;
}

.col4of6 {
  width: 66.66666%;
}

.col5of6 {
  width: 83.33333%;
}

/* Test data */
.test-module {
  background-color: #ddd;
  margin: 10px;
  padding: 10px;
}

.another-module {
  background-color: #91bd92;
  border: 1px solid #ddd;
  padding: 9px;
}