JSFiddle - React, Tailwind, and code Playground

by Matthew Marcus

HTML

<link
  rel="stylesheet"
  type="text/css"
  href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"
/>

<p>Examples:</p>

<div class="left-inner-addon input-container">
  <i class="fa fa-lock"></i>
  <input class="form-control" placeholder="Untitled Dashboard" />
</div>

CSS

input {
    width: 100%;
		padding: 1em !important;
		margin: 0em !important;
		box-sizing: border-box;
    text-align: center;
}

.input-container {
	padding-bottom: 1em;
}

.left-inner-addon {
    position: relative;
}

.left-inner-addon input {
    padding-left: 35px !important; 
}

.left-inner-addon i {
    position: absolute;
    padding: 12px 12px;
    pointer-events: none;
}