JSFiddle - React, Tailwind, and code Playground
HTML
<div class="steps">
<div class="now">Register</div>
<div class="active"></div>
</div>
CSS
/*******************************
Step
*******************************/
.steps > * {
display: inline-block;
position: relative;
padding: 1em 2em 1em 3em;
vertical-align: top;
background-color: #FFFFFF;
color: #888888;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.steps > *:after {
position: absolute;
z-index: 2;
content: '';
top: 0em;
right: -1.45em;
border-bottom: 1.5em solid transparent;
border-left: 1.5em solid #FFFFFF;
border-top: 1.5em solid transparent;
width: 0em;
height: 0em;
}
/*******************************
Group
*******************************/
.steps {
/*font-size: 0em;*/
letter-spacing: -0.31em;
line-height: 1;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
-moz-border-radius: 0.3125rem;
-webkit-border-radius: 0.3125rem;
border-radius: 0.3125rem;
}
.steps > * {
letter-spacing: normal;
width:150px;
height:50px; // i set the height from here
}
.steps > *:first-child {
padding-left: 1.35em;
-webkit-border-radius: 0.3125em 0em 0em 0.3125em;
-moz-border-radius: 0.3125em 0em 0em 0.3125em;
border-radius: 0.3125em 0em 0em 0.3125em;
}
.steps > *:last-child {
-webkit-border-radius: 0em 0.3125em 0.3125em 0em;
-moz-border-radius: 0em 0.3125em 0.3125em 0em;
border-radius: 0em 0.3125em 0.3125em 0em;
margin-right: 0;
}
.steps > *:only-child {
-webkit-border-radius: 0.3125em;
-moz-border-radius: 0.3125em;
border-radius: 0.3125em;
}
.steps > *:last-child:after {
display: none;
}
/*******************************
States
*******************************/
/* Hover */
.steps > *:hover,
.steps > *.hover {
background-color: #F7F7F7;
color: rgba(0, 0, 0, 0.8);
}
.steps > *.hover:after,
.steps > *:hover:after {
border-left-color: #F7F7F7;
}
/* Hover */
.steps > *.down,
.steps > *:active {
...