JSFiddle - React, Tailwind, and code Playground

by dife

HTML

<div>
  <section class="box">
    <p>Presidente</p>
  </section>
  <span class="point"></span>
  <span class="vertical-line"></span>
  <section class="box fin">
    <p>Financeiro</p>
    <span class="r-point"></span>
    <span class="horizontal-line"></span>
    <span class="l-point"></span>
    <section class="box rh">
      <p>RH</p>
    </section>
  </section>
   <section class="box ti-cont">
    <p>TI</p>
    <span class="r-point"></span>
    <span class="horizontal-line"></span>
    <span class="l-point"></span>
    <section class="box rh">
      <p>Contábil</p>
    </section>
  </section>
  
 <span class="horizontal-line h-line-big"></span>
  
    <section class="box prod">
      <section class="circle-line">
        <span class="vertical-line v-line-small"></span>
        <span class="point top top-prod"></span>
        <p>Produção</p>
      </section>
     </section>
    <section class="box com">
      <span class="point top"></span>
      <p>Comercial</p>
     </section> 
    <section class="box log">
    <p>Logística</p>
       <section class="circle-line cl-log">
        <span class="vertical-line v-line-small"></span>
        <span class="point top top-log"></span>
      </section>     
      </section> 
</div>

CSS

body{background-color: #ededed;}
div{ width: 960px; height:600px; margin: 0 auto; position: relative; }

.box{
  width: 200px;
  height: 100px; 
  background: #ededed;
  margin: 0 auto;
  border-radius: 20px;
  border: 3px solid #575656;
}

p{
  font-size: 16pt;
  text-align: center;  
  font-family:arial;
  padding: 10px;
}

.fin{
  position: absolute;
  top: 150px;
  left: 220px;
}

.rh{
  position: absolute;
  top: -4px;
  left: 312px;
  z-index:1;
}

.ti-cont{
   position: absolute;
  top: 290px;
  left: 220px;
}



.prod{
    position: absolute;
  top: 458px;
  left: 145px;
}

.prod-aligin{
   top: 434px;
}

.log{
    position: absolute;
  top: 458px;
  left: 604px;
}

.com{
  position: absolute;
  top: 458px;
  left: 374px;
}

.point{
   width: 10px;
  height: 10px;
  background-color: #ededed;
  display: block;
  border: 2px solid orange;
  border-radius: 10px;
  margin: -10px auto;
}
.top{
  position: relative;
  top: 0px;
  left: 3px;
}
.top-log{
  left: 0px;
}

.top-prod{
  left: 0px;
}

.r-point{
   width: 10px;
  height: 10px;
  background-color: #ededed;
  display: block;
  border: 2px solid orange;
  border-radius: 10px;
  position: absolute;
  top: 40px;
  left: 194px;
}

.l-point{
   width: 10px;
  height: 10px;
  background-color: #ededed;
  display: block;
  border: 2px solid orange;
  border-radius: 10px;
  position: absolute;
  top: 40px;
  left: 305px;
  z-index:2;
}

.vertical-line{
  width: 6px;
  height: 340px;
  background-color: #b3b2b2;
  display: block;
  margin: 10px auto;
  position: relative;
}

.v-line-small{
  height: 20px;
 
}

.circle-line{
  position: relative;
  top: -37px;
}

.cl-log{
  position: relative;
  top: -82px;
}

.horizontal-line{
  width: 100px;
  height: 6px;
  background-color: #b3b2b2;
  display: block;
  position: absolute;
  top: 44px;
  left: 208px;
  
}

.h-line-big{
  position: absolute;
  width: 465px;
  top: 428px;
  left: 245px;
}