JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
</head>

<div class="main">
  <div id="wrapper" class="steps">
    <div class="bt_wrap" name="1" data-slide="slide1">
      <div class="box">
        <i class="icon fa fa-clipboard">
          <span ng-class="{'started': c.data.questionnaire}" class="fa fa-check-circle"></span>
        </i>
        <i class="icon2 fa fa-clipboard">
          <span ng-class="{'started': c.data.questionnaire}" class="fa fa-check-circle"></span>
        </i>
      </div>
    </div>
    <div class="bt_wrap" name="2" data-slide="slide2">
      <div class="box">
        <i class="icon fa fa-building">
          <span ng-class="{'started': c.data.work_history}" class="fa fa-check-circle"></span>
        </i>
        <i class="icon2 fa fa-building">
          <span ng-class="{'started': c.data.work_history}" class="fa fa-check-circle"></span>
        </i>
      </div>
    </div>
    <div class="bt_wrap" name="3">
      <div class="box">
        <i class="icon fa fa-users">
          <span ng-class="{'started': c.data.beneficiaries}" class="fa fa-check-circle"></span>
        </i>
        <i class="icon2 fa fa-users">
          <span ng-class="{'started': c.data.beneficiaries}" class="fa fa-check-circle"></span>
        </i>
      </div>
    </div>
    <div class="bt_wrap" name="4">
      <div class="box">
        <i class="icon fa fa-university">
          <span ng-class="{'started': c.data.tax}" class="fa fa-check-circle"></span>
        </i>
        <i class="icon2 fa fa-university">
          <span ng-class="{'started': c.data.tax}" class="fa fa-check-circle"></span>
        </i>
      </div>
    </div>
    <div class="bt_wrap" name="5">
      <div class="box">
        <i class="icon fa fa-file-pdf-o"></i>
        <i class="icon2 fa fa-file-pdf-o"></i>
      </div>
    </div>
  </div>
  <div class="content">
    <div id="slide1" class="slide form-container">
      <h2 class="form-title">Welcome to...

CSS

#slide1 {
  display: block;
}

#slide2 {
  display: none;
}

#wrapper {
  text-align: center;
}

.bt_wrap {
  display: flex;
  flex-direction: column;
  width: auto;
  height: auto;
  background: gray;
  width: 100px;
  height: 100px;
  cursor: pointer;
  perspective: 200px;
  transition: background 0.2s ease-out;
}

.box {
  position: absolute;
  perspective-origin: 50px 50px;
  transform-origin: 50px 50px;
  transition: transform 0.2s ease-out;
  transform-style: preserve-3d;
}

.icon,
.icon2 {
  position: absolute;
  top: 0;
  left: 20px;
  margin-top: 20px;
  background: black;
  color: #fff;
  width: 60px;
  height: 60px;
  font-size: 2em;
  line-height: 60px;
  transition: background 0.2s ease-out;
  transform: translate3d(0px, 0px, 30px) rotateY(0deg);
}

.icon2 {
  background: black;
  transform: translate3d(29px, 0px, 0px) rotateY(90deg);
  transition: background 0.2s ease-out;
}

.bt_wrap:hover {
  background: blue;
}

.bt_wrap:hover .icon {
  background: black;
}

.bt_wrap:hover .icon2 {
  background: black;
  color: blue;
}

.bt_wrap:hover .box {
  transform: rotateY(-90deg);
}

.active .box {
   transform: rotateY(-90deg);
}

.active {
    background: blue;
}

.started {
  font-size: 0.75em;
  position: absolute;
  bottom: 4px;
  right: 4px;
  color: green;
  background: white;
  border-radius: 50%;
  width: 1em;
}

.main {
  display: flex;
}

.content {
  width: 100%;
  padding-left: 1em;
  text-align: center;
  display: flex;
  align-items: center;
}

.form-title {
  margin-top: 0;
  margin-bottom: 30px;
  padding-bottom: 15px;
  position: relative;
}

.form-title::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 80px;
  height: 4px;
  background: orange;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -otransform: translateX(-50%);
  transform: translateX(-50%);
}

JavaScript

$('.bt_wrap').click(function(){
	$('.bt_wrap').removeClass('active'); //remove active class on all buttons
	$(this).addClass('active'); //add active class to the one that you clicked 
  
  var slideId = $(this).attr('data-slide'); //find the value of the associated slide id 
  
  $('.slide').not("#" + slideId).hide(); //hid all slides except the one you want to show
  
  $("#" + slideId).show(); //show the one you want to show
  
});