JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container">
  <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="fa fa-envelope-o fa-fw"></i></span>
    </div>
    <input class="form-control" type="text" placeholder="Email address">
  </div>

  <div class="input-group">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="fa fa-key fa-fw"></i></span>
    </div>
    <input class="form-control" type="password" placeholder="Password">
  </div>

  <div class="input-group mb-3">
    <input class="form-control" type="text" placeholder="Email address">
    <div class="input-group-append">
      <span class="input-group-text"><i class="fa fa-envelope-o fa-fw"></i></span>
    </div>
  </div>

  <div class="input-group">
    <input class="form-control" type="password" placeholder="Password">
    <div class="input-group-append">
      <span class="input-group-text"><i class="fa fa-key fa-fw"></i></span>
    </div>
  </div>
</div>

CSS

.input-group {
  margin-top: 10px;
}