JSFiddle - React, Tailwind, and code Playground

HTML

<ol class="joinprocess">
  <li class="current"><span>약관동의</span></li>
  <li class=""><span>정보 입력</span></li>
  <li class=""><span>회원 가입 완료</span></li>
</ol>

<ol class="joinprocess">
  <li class=""><span>약관동의</span></li>
  <li class="current"><span>정보 입력</span></li>
  <li class=""><span>회원 가입 완료</span></li>
</ol>

<ol class="joinprocess">
  <li class=""><span>약관동의</span></li>
  <li class=""><span>정보 입력</span></li>
  <li class="current"><span>회원 가입 완료</span></li>
</ol>

CSS

ol, li {
    padding:0;
    margin:0;
}
.joinprocess	{overflow:hidden;height:44px;border-top:1px solid #565656;border-bottom:1px solid #565656;margin-bottom:10px;
	/* old ver */
    display: -moz-box;
    display: -webkit-box;
    /* new ver */
    display: -moz-flex;
    display: -webkit-flex;
    display: flex;
    -webkit-align-content: stretch;
    align-content: stretch;
}
.joinprocess li	{position:relative;padding-top:10px;padding-left:10px;font-weight:bold;font-size:12px;color:#fff;text-stroke:#969696;text-align:center;background:#a5a5a5;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	/* old ver */
    display:-moz-box;
	display:-webkit-box;
	-webkit-box-flex:1;
	-webkit-box-pack:center;
   -webkit-box-align:center;
    /* new ver */
    display:-moz-flex;
    display:-webkit-flex;
    display:flex;
    -webkit-flex:1;
    flex:1;
    -webkit-justify-content:center;
    justify-content:center;
    -webkit-align-items:center;
    align-items:center;
	-webkit-box-shadow:inset 0 1px 0 #c0c0c0, inset 0 -1px 0 #c0c0c0;
	box-shadow:inset 0 1px 0 #c0c0c0, inset 0 -1px 0 #c0c0c0;
}
.joinprocess li.current	{position:relative;color:#434343;background:#fefefe;
	-webkit-box-shadow:none;
	box-shadow:none;
}
.joinprocess li:before	{content:'';position:absolute;top:6px;right:-16px;z-index:1;width:31px;height:31px;border:1px solid #6c6c6c;background:#a5a5a5;
	-webkit-box-shadow:1px -1px 0 rgba(0,0,0,0.1), inset -1px 1px 0 rgba(255,255,255,0.4);
	box-shadow:1px -1px 0 rgba(0,0,0,0.1), inset -1px 1px 0 rgba(255,255,255,0.4);
    -webkit-transform:rotate(45deg) skew(22deg, 22deg);
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.joinprocess li:after	{content:'';position:absolute;top:0;right:-3px;bottom:0;z-index:5;width:17px;background:#a5a5a5;
	-webkit-box-shadow:inset 0 1px 0 #c0c0c0, inset 0 -1px 0 #c0c0c0;
	box-shadow:inset 0 1px 0 #c0c0c0, inset 0 -1px 0 #c0c0c0;
}
.joinprocess li.current:before, .joinprocess...