JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer-box">
  <span>www</span>
  <input placeholder="Lol Kek">
  <button>Chebureck</button>
</div>
<div class="outer-box">
  <div class="box">kek</div>
  <div class="box">kek</div>
  <div class="box">kek</div>
  <div class="box">kek</div>
  <div class="box">kek</div>
  <div class="box">kek</div>
  <div class="box">kek</div>
  <div class="box">kek</div>
  <div class="box">kek</div>
  <div class="box">kek</div>
  <div class="box">kek</div>
  <div class="box">kek</div>
  <div class="box">kek</div>
  <div class="box">kek</div>
  <div class="box">kek</div>
  <div class="box">kek</div>
  <div class="box">kek</div>
  <div class="box">kek</div>
  <div class="box">kek</div>
  <div class="box">kek</div>
</div>

CSS

* {
   box-sizing: border-box;
}
.outer-box {
   padding: 4px;
   margin: 20px 4px;
   border: 1px solid #ccc;
   overflow: hidden;
   background-color: #fff;
   color: #999;
}
.outer-box input {
  padding: 4px;
  border: 1px solid transparent;
  border-right-color: #ccc;
  border-left-color: #ccc;
}
.outer-box button {
  padding: 4px;
  border:  1px solid transparent;
  background: inherit;
  color: inherit;
}
.outer-box span {
  display: inline-block;
  padding: 4px;
}
.outer-box .box {
  float:left;
  position: relative;
  width: 25%;
  height: 80px;
  padding: 16px;
}
.outer-box .box::after {
  content: '';
  height: 1px;
  right: 24px;
  left: 8px;
  position: absolute;
  bottom: 0px;
  background: #ccc;
}
.outer-box .box::before {
  content: '';
  width: 1px;
  top: 16px;
  bottom: 16px;
  position: absolute;
  right: 8px;
  background: #ccc;
}
.outer-box .box:nth-of-type(4n)::before {display: none;}
.outer-box .box:nth-last-of-type(1)::after,
.outer-box .box:nth-last-of-type(2)::after,
.outer-box .box:nth-last-of-type(3)::after,
.outer-box .box:nth-last-of-type(4)::after {display: none;}