JSFiddle - React, Tailwind, and code Playground

by stevenkaspar

HTML

<div class='row'>
  <div class='col-3' border padded>
    <p>
      col-3 width 25%
    </p>
    <input />
  </div>
  <div class='col-3' border padded>
    col-3 width 25%
  </div>
  <div class='col-3' border padded>
    col-3 width 25%
  </div>
  <div class='col-3' border padded>
    col-3 width 25%
  </div>
</div>

<div class='row'>
  <div class='col-6' border padded>
    <p bg-green>
      Think of it being a grid that is 12 blocks wide. If I use class='col-6' that means I want that div to take up 6 (50%) of those 12 blocks until the page is below 468px at which point everything goes to 100%
    </p>
  </div>
  <div class='col-6' border padded>
    width 50%
    <input />
  </div>
</div>

<div class='row'>
  <div class='col-1' border padded>
    col-1
  </div>
  <div class='col-4' border padded>
    col-4
  </div>
  <div class='col-7' border padded>
    col-7
  </div>
</div>

<div class='row'>
  <h4 secondary>below is an example page layout with a header & sidebars</h4>
</div>

<div class='row'>
  <div class='col-12' border padded center>
    home | questions | account
  </div>
</div>

<div class='row'>

  <div class='col-3' padded>
    left sidebar
  </div>

  <div class='col-6' padded bg-yellow>
    <p>
      Here is some content for our page
    </p>
    <form>
      <label>1st input</label>
      <input />
      <label>2nd input</label>
      <input />
    </form>
  </div>

  <div class='col-3' padded bg-blue>
    right sidebar
  </div>

</div>

CSS

body {
  background: #fff;
}

* {
  box-sizing: border-box;
}

.row {
  clear: both;
  overflow-y: auto;
}

.col-1 {
  width: 8.3%;
  float: left;
}

.col-2 {
  width: 16.6%;
  float: left;
}

.col-3 {
  width: 24.9%;
  float: left;
}

.col-4 {
  width: 33.3%;
  float: left;
}

.col-5 {
  width: 41.6%;
  float: left;
}

.col-6 {
  width: 49.9%;
  float: left;
}

.col-7 {
  width: 58.3%;
  float: left;
}

.col-8 {
  width: 66.6%;
  float: left;
}

.col-9 {
  width: 74.9%;
  float: left;
}

.col-10 {
  width: 83.3%;
  float: left;
}

.col-11 {
  width: 91.5%;
  float: left;
}

.col-12 {
  width: 99.9%;
  float: left;
}

@media (max-width: 468px) {
  .col-1,
  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-6,
  .col-7,
  .col-8,
  .col-9,
  .col-10,
  .col-11,
  .col-12 {
    width: 100%;
    float: left;
  }
}

input {
  width: 100%;
}


/** I use attribute selectors just for a cleaner class name **/

[border] {
  border: 1px solid #eee;
}

[padded] {
  padding: 8px;
}

[secondary] {
  background: #ddd;
  color: #666;
}

[bg-yellow] {
  background: yellow;
}

[bg-blue] {
  background: aliceblue;
}

[bg-green] {
  background: #E1FFDA;
}

[center] {
  text-align: center;
}