JSFiddle - React, Tailwind, and code Playground

HTML

<div class="line_wrapper">
		<div class="kontur_circle"></div>
		<div class="kontur_line"></div>
		<div class ="kontur_pointer"></div>
	</div>

	<div class="underline"></div>

CSS

html, body {
	width: 100%;
	height: 100%;
}
body {
	position: relative;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	position: relative;
}

* {margin:0; padding:0;}

.line_wrapper {
	position: relative;
	width: 85%;
	height: 16px;
	margin: auto;
	margin-top:10px;
}
.kontur_circle {
	display: inline-block;
    position:absolute;
	left: -6px;
	top: 8px;
	width: 8px;
	height: 9px;
	background: #90C925; 
	-moz-border-radius: 70px; 
	-webkit-border-radius: 70px; 
	border-radius: 70px;
}
.kontur_line {
	display: inline-block;
    position:relative;
    top:-4px;
	margin: auto;
	height: 4px;
	width: 96%;
	background-color: #90C925;
}
.kontur_pointer {
	display: inline-block;
	margin-left: -4px;
	margin-top: 7px;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 6px 0 6px 9px;
	border-color: transparent transparent transparent #90c925;
	line-height: 0px;
	_border-color: #000000 #000000 #000000 #90c925;
	_filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
	}

.underline {
    position: fixed;
	margin: 0px auto;
	height: 4px;
	width: 85%;
	top:95%;
	background-color: #90C925;
}