JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<div class="progressbar_wrap">
					<ul class="progressbar">
						<li class="done"><a href="javascript:void(0)"><span>Díjszámítási adatok</span></a></li>
						<li class="done"><a href="javascript:void(0)"><span>Ajánlatok</span></a></li>
						<li class="current"><a href="javascript:void(0)"><span>Szerződő adatok</span></a></li>
						<li><a href="javascript:void(0)"><span>Nyilatkozatok</span></a></li>
						<li><a href="javascript:void(0)"><span>Ajánlatkészítés</span></a></li>
					</ul>
				</div>

SCSS

*{
  box-sizing: border-box;
  font-family: Arial;
}
.progressbar {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;

    li {
        list-style-type: none;
        flex: 1 1 100%;
	    a{
	    	display: block;
	    	vertical-align: middle;
	    	border: 1px solid #f0f2f3;
	        background-color: #f0f2f3;
	        padding: 0 5px 0 25px;
	        height: 33px;
	        line-height: 30px;
	        font-size: 12px;
	        position: relative;
	        color: #252525;
	        pointer-events: none;
	        transition: all 600ms ease-in-out;

	        &::after {
	            display: inline-block;
	            content: "";
	            position: absolute;
	            top: -1px;
	            right: -16px;
	            z-index: 3;
	            width: 0;
	            height: 0;
	            border-style: solid;
	            border-width: 16.5px 0 16.5px 17px;
	            border-color: transparent transparent transparent #f0f2f3;
	        	transition: all 600ms ease-in-out;
	        }

	        &::before {
	            display: inline-block;
	            content: "";
	            position: absolute;
	            top: -1px;
	            right: -19px;
	            z-index: 3;
	            width: 0;
	            height: 0;
	            border-style: solid;
	            border-width: 16.5px 0 16.5px 18px;
	            border-color: transparent transparent transparent #fff;
	        }
	        span{
	        	display: inline-block;
	        	line-height: 1.2;
	        	vertical-align: middle;
	        }
	    }
		&:first-of-type a{
	        padding-left: 5px;
	    }
	    &:last-of-type a{
	    	&::before, &::after{
	    		display: none !important;
	    	}
	    }
	    &.done a{
            background-color: #24b2c0;
            color: #fff;
            border: 1px solid #24b2c0;
            cursor: pointer;
            pointer-events: auto;
            &::after{
            	border-color: transparent transparent transparent...