JSFiddle - React, Tailwind, and code Playground

HTML

<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"></div>
  </div>
  <div class="row">
    <div class="col-half bordered">
     <img src="https://i.imgur.com/1dYPMSM.jpg" width="200px" style="float: left; margin-right: 10px;">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas volutpat scelerisque nibh, in egestas elit porta ac. Etiam neque mauris, sollicitudin in erat id, lacinia finibus mi. Integer venenatis lectus nec posuere faucibus. Cras tristique
        enim ultricies, dapibus magna eget, venenatis mi. Aenean iaculis elit vel enim accumsan, at iaculis sapien convallis. Nullam non ante et risus accumsan cursus. Nunc eleifend pretium nisl, auctor accumsan erat rutrum eu. Etiam ut mauris non enim
        dapibus bibendum. Aenean eleifend a nulla eget malesuada. Proin feugiat metus quis aliquet facilisis.
      <br><a href="https://www.reddit.com/r/cats/comments/54tqyb/two_little_kitties_playing_on_a_pillow_in_my/">Photo credit</a>
      </p>
    </div>
    <div class="col-quarter bordered"></div>
    <div class="col-quarter bordered">
      <form>
        <label for="firstname">First name:</label>
        <input type="text" name="firstname">
        <br>
        <label for="lastname">Last name:</label>
        <input type="text" name="lastname">
      </form>
    </div>
  </div>
  <div class="row">
    <div class="col bordered">
    </div>
    <div class="col bordered">
    </div>
    <div class="col bordered">
    </div>
    <div class="col bordered">
    </div>
    <div class="col bordered">
    </div>
    <div class="col bordered">
    </div>
    <div class="col bordered">
    </div>
    <div class="col bordered">
    </div>
    <div class="col bordered">
    </div>
   
  </div>
</div>

CSS

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

p {
  margin: 0;
  text-align: justify;
}

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

.bordered {
  box-sizing: border-box;
  border: solid 0.5em transparent;
  position: relative;
  padding: 10px;
}

.bordered::before {
  background: rgba(52, 152, 219, .3);
  border: 1px solid #2c3e50;
  content: '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: -1;
}