JSFiddle - React, Tailwind, and code Playground

HTML

<div id="progress">
    <div class="progressBar"></div>
    <div class="progressNow" value="1"></div>
    <div class="progressTotal"></div>
</div>

CSS

#progress {
	position: relative;
}

#progress .progressBar {
	height: 800px;
	width: 6px;
	background: #8fe4bf;
	position: absolute;
}

#progress .progressNow {
	height: 100px;
	width: 6px;
	background: #00b164;
	position: absolute;
}

#progress .progressNow::after {
	content: "";
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #00b164;
	display: block;
	margin-left: -5px;
	position: absolute;
	top: 90px;
}