JSFiddle - React, Tailwind, and code Playground

by navinleon

HTML

<div>
  <div class="mrow">
    <div class="top-1-left-bar top-1-left-bar-first">
      <div class="top-left-bar-text">
      Visitor-to-signup Rate
      </div>
    </div>
    <div class="bottom-1-left-bar">
      <div class="bottom-left-bar-text">
        <i class="right-i"></i>
      </div>
    </div>
    <div class="mbox">
      <h2>
        Visitor
      </h2>
    </div>
    <div class="top-2-left-bar top-2-left-bar-first">
      <div class="top-left-bar-text">
      Trial-to-PQL Rate
      </div>
    </div>
    <div class="bottom-2-left-bar">
      <div class="bottom-left-bar-text">
        <i class="right-i"></i>
      </div>
    </div>
    <div class="mbox">
      <h2>
        Signup
      </h2>
    </div>
  </div>
  <div class="mrow">
    <div class="mbox">
      <h2>
        PQLs
      </h2>
    </div>
  </div>
  <div class="rel">
    <div>
      <div class="top-last">
        
      </div>
      <div class="bottom-last">
        <div class="bottom-last-left-bar-text">
          Visitor-to-signup Rate
        </div>
        <div class="bottom-last-right-bar-text">
          Visitor-to-signup Rate
        </div>
      </div>
      <div class="bottom-end">
      </div>
    </div>
    <div class="mhbox-holder">
        <div class="mhbox">
          <h2>
            Churned customer
          </h2>
        </div>
        <div class="mhbox">
          <h2>
            Active customer
          </h2>
        </div>
      </div>
    </div>
</div>

CSS

.mrow{
  position:relative;
}
.mbox{
  min-height:50px;
  width:200px;
  background-color:#f1f1f2;
  padding:20px;
display:block;
margin-left:300px;
margin-top:100px;
}
.top-last{
  border-left:1px solid #000;
height:80px;
position:absolute;
margin-top:-200px;
margin-left:420px;
}
.rel{
  position:relative;
}
.mhbox-holder{
  display: block;
    width: 650px;
    min-height: 150px;
    background-color: #ccc;
    text-align: center;
    margin-top:200px;
    margin-left:100px;
}
.bottom-last{
  border:1px solid #000;
  border-bottom:none;
  height:50px;
  width:350px;
  left:240px;
  position:absolute;
  margin-top:-120px;
}
.bottom-end{
  border:1px solid #000;
  border-bottom:none;
  border-top:none;
  height:50px;
  width:350px;
  left:240px;
  position:absolute;
  margin-top:-15px;
}
.mhbox{
  min-height: 50px;
    background-color: #f1f1f2;
    padding: 20px;
    display: inline-block;
    margin: 38px;
}
.top-1-left-bar{
  width:200px;
  top:85px;
  padding-top:30px;
  border-top:1px solid #000;
  border-left:1px solid #000;
  left:95px;
  position:absolute;
  height:30px;
  
}
.top-2-left-bar{
  width:200px;
  top:290px;
  padding-top:30px;
  border-top:1px solid #000;
  border-left:1px solid #000;
  left:95px;
  position:absolute;
  height:20px;
  
}
.top-1-left-bar-first{
  top:50px;
}
.bottom-1-left-bar{
  width:200px;
  top:180px;
  padding-top:30px;
  border-bottom:1px solid #000;
  border-left:1px solid #000;
  left:95px;
  position:absolute;
  height:20px;
  
}
.bottom-2-left-bar{
  width:200px;
  top:420px;
  padding-top:30px;
  border-bottom:1px solid #000;
  border-left:1px solid #000;
  left:95px;
  position:absolute;
  height:20px;
  
}
.right-i {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  position: absolute;
  right:0px;
bottom:-4px;
}
.top-left-bar-text{
  bottom:-30px;
  position:absolute;
  width:200px;
  text-align:center;
...