JSFiddle - React, Tailwind, and code Playground

HTML

<!-- shape progress_bar -->
<div class="progress">
	<div class="progress_bar">80%</div>
</div>

CSS

/* shape progress_bar */
.progress {
	height: 20px;
	overflow: hidden;
	background: yellow;
}
.progress .progress_bar {
	position: relative;
	width: 80%;
	height: 100%;
	background: blue;
}
.progress .progress_bar:before {
	display: block;
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 20px;
	height: 40px;
	background: #eaeaea;
	-webkit-transform: translate(100%, 0) rotate(-25deg);
	-ms-transform: translate(100%, 0) rotate(-25deg);
	transform: translate(100%, 0) rotate(-25deg);
	-webkit-transform-origin: left bottom;
	-ms-transform-origin: left bottom;
	transform-origin: left bottom;
}
.progress .progress_bar:after {
	display: block;
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 8px;
	height: 50px;
	background: red;
	//-webkit-transform: rotate(-25deg);
	//-ms-transform: rotate(-25deg);
	//transform: rotate(-25deg);
	-webkit-transform-origin: right bottom;
	-ms-transform-origin: right bottom;
	transform-origin: right bottom;
}

JavaScript

/* shape progress_bar */