JSFiddle - React, Tailwind, and code Playground

HTML

<title>Drag</title>
<body>
	<div class="b_step33">
		<div class="block_right">
			<ul class="list">
				<li class="dot">
					<div class="dotline" id="hc_pc">
						<i class="dot1" onClick="$(this).parent().find('i').removeClass('selected');$(this).addClass('selected');"></i>
						<i class="dot2" onClick="$(this).parent().find('i').removeClass('selected');$(this).addClass('selected');"></i>
						<i class="dot3 selected" onClick="$(this).parent().find('i').removeClass('selected');$(this).addClass('selected');"></i>
						<i class="dot4" onClick="$(this).parent().find('i').removeClass('selected');$(this).addClass('selected');"></i>
						<i class="dot5" onClick="$(this).parent().find('i').removeClass('selected');$(this).addClass('selected');"></i>
					</div>
				</li>
			</ul>
		</div>
	</div>
</body>

CSS

.b_step33 .block_right .list li { float:left; display:block; line-height:140%; margin-bottom:2px; }

.b_step33 .block_right .list li.dot { height:36px; padding:5px 8px; background:#F5F6FA; }

.b_step33 .block_right .list li.dot .dotline { position:relative; background:url(http://i.imgur.com/OTUF7AE.png) no-repeat center center; width:170px; height:20px; margin:10px auto; }

.b_step33 .block_right .list li.dot .dotline i { top:2px; width:15px; height:15px; display:block; position:absolute; cursor:pointer; }

.b_step33 .block_right .list li.dot .dotline i.dot1 { left:-2px; }
.b_step33 .block_right .list li.dot .dotline i.dot2 { left:37px; }
.b_step33 .block_right .list li.dot .dotline i.dot3 { left:74px; }
.b_step33 .block_right .list li.dot .dotline i.dot4 { left:112px; }
.b_step33 .block_right .list li.dot .dotline i.dot5 { left:150px; }

.b_step33 .block_right .list li.dot .dotline i.selected { background:url(http://i.imgur.com/ybhGSUc.png) no-repeat; }