JSFiddle - React, Tailwind, and code Playground

by PhilippeVay

HTML

<body>
  <div id="left">Left
  </div><div id="middle">Middle
  </div><div id="right">Right</div>
</body>

CSS

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Browser Settings has been Reset */

div {
    position: relative;
    display: inline-block;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
    width: 33.3333%;
    padding: 0 4px;
    height: 5em;
    line-height: 5em;
    text-align: center;
}
div:before,
div:after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    display: block;
    width: 4px;
    background-color: yellow;
}
div:before { left: 0; }
div:after { right: 0; }
/* no gutter on far left and far right */
#left:before,
#right:after {
    display: none;
}

#left {
    background-color: red;
}

#middle {
    background-color: green;
}

#right {
    background-color: blue;
}