JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="stepsholder"><div class="steps"></div></div>
<button onclick="step('1','Building Width','#ffcc77');">+ ADD STEP</button>
<button onclick="step('2','Building Length','#f4cc47');">+ ADD STEP</button>

CSS

.stepsholder{
  position:fixed;
  bottom:0px;
  left:0px;
  right:0px;
  background-color:rgba(0,0,0,0.5);
  padding:5px;
}
.steps{
 
}
.steps>div{
  position:relative;
  display:inline-block;
  font-family:helvetica;
  color:#fff;
  width:15px;
  padding:10px;
  height:28px;
  clip-path: polygon(0 0%, 80% 0%, 80% 0, 100% 50%, 80% 100%, 80% 100%, 0 100%);
 transition:all 0.6s;
 cursor:pointer;
 overflow:hidden;
}
.steps>div>h3{
  margin:0px;
  font-size:14px;
  width:120px;
  line-height: 28px;
}
.steps>div>h3>span{
  display:none;
}
.steps>div>p{
  margin:0px;
  font-size:10px;
  display:none;
  width:120px;
}
.steps>div:hover>h3{
  line-height:initial;
}
.steps>div:hover>h3>span{
  display:inline;
}
.steps>div:hover>p{
   display:block;
}
.steps>div:hover{
  width:100px;
}

.steps>div.selected>h3{
  line-height:initial;
}
.steps>div.selected>h3>span{
  display:inline;
}
.steps>div.selected>p{
   display:block;
}
.steps>div.selected{
  width:100px;
}

JavaScript

function step(number,title,color){

	var item = $('<div style="background-color:' + color + ';"><h3><span>STEP </span>' + number + '</h3><p>' + title + '</p></div>');
  
  item.click(function(){
  
  $('.slides>div').removeClass('selected');
  $(this).addClass('selected');
  
  });
  
  $('.steps').append(item);

}