JSFiddle - React, Tailwind, and code Playground

by Dan Atkinson

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="input-group">
	<span>
    <i class="fa fa-user-circle-o" aria-hidden="true"></i>
  </span>
  <input type="text" class="form-control" placeholder="Username" />
</div>

CSS

span{
	position: relative;
}
span i{
	position: absolute;
  padding-left: 5px;
	height: 25px;
  top: 3px;
  right: 5px;
	display: flex;
	align-items: center;
}

input{
	 padding-left: 25px;
   height: 20px;
	 outline: none;
}