JSFiddle - React, Tailwind, and code Playground

by chris_tsongas

HTML

<div id="container"><div id="left" class="border-box"></div><div id="middle" class="border-box"></div><div id="right" class="border-box"></div></div>

CSS

#container {
  width: 100%;
  height: 66px;
  background-color: #00ff00;
}
#left {
  display: inline-block;
  width: 38.5%;
  height: 100%;
  border: solid #7D8995;
  border-width: 10px 5px 10px 10px;
  background-color: #ffffff;
}
#middle {
  display: inline-block;
  width: 38.5%;
  height: 100%;
  border: solid #7D8995;
  border-width: 10px 5px 10px 5px;
  background-color: #ffffff;
}
#right {
  display: inline-block;
  width: 23%;
  height: 100%;
  border: solid #7D8995;
  border-width: 10px 10px 10px 5px;
  background-color: #D7122F;
}
.border-box {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}