JSFiddle - React, Tailwind, and code Playground

by bejnar

HTML

<div class="container">
	
	<div class="step">
		<div class="dot">1</div>
		<div class="line"></div>
		<div class="text">Step instructions</div>
	</div>
	
	<div class="step">
		<div class="dot">2</div>
		<div class="line"></div>
		<div class="text">Step instructions</div>
	</div>
	
	<div class="step">
		<div class="dot">3</div>
		<div class="line"></div>
		<div class="text">Step instructions</div>
	</div>

</div>

SCSS

.container {
	display: flex;
	justify-content: space-evenly;
}

.dot {
	background-color: yellow;
	border-radius: 100%;
	width: 30px;
	height: 30px;
}
.step {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	border: 1px solid gray;
}