JSFiddle - React, Tailwind, and code Playground

by Otobong Okoko

HTML

<link rel="stylesheet" href="http://ionicabizau.github.io/gridly/dist/gridly.min.css">
<link rel="stylesheet" href="https://ionicabizau.github.io/gridly/dist/gridly.min.css">
<div class="container">
  <div class="row">
    <div class="col-fifth bordered">Hello flexbox</div>
    <div class="col bordered">this takes the space left</div>
  </div>
  <div class="row">
    <div class="col-half bordered">half</div>
    <div class="col-quarter bordered">quarter</div>
    <div class="col-quarter bordered">quarter</div>
  </div>
</div>

CSS

body {
  background: #ecf0f1;
  font-family: Helvetica;
  font-size: 97%;
}

.container {
  width: 90%;
  margin: 50px auto;
}

.bordered {
   border: 1px solid red;
   box-sizing: border-box;
}