JSFiddle - React, Tailwind, and code Playground

by iii l

HTML

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

	<div class="underline-cont">
	    <div class="underline"></div>
	</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-cont {
    position: fixed;
	margin: 0;
	width: 100%;
	bottom:5%;
}
.underline {
    width:85%;
	background-color: #90C925;
	height: 4px;
    margin: 0 auto;
}