JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.1/custom/bootstrap.min.css">
<div class="well">
    <form role="form">
      <div class="form-group">
        <label for="exampleInputEmail1">Email</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Пароль</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
      </div>
      <button type="submit" class="btn btn-primary">Отправить</button>
    </form>    
</div>

CSS

.form-control, .btn, .well {
    border-radius: 0;
}
input[type="email"] {
    border: 1px solid blue;
}
input[type="password"] {
    border: 1px solid tomato;
}
.form-control::-webkit-input-placeholder       {opacity: 1; transition: opacity 0.3s ease; color: tomato;}
.form-control::-moz-placeholder                {opacity: 1; transition: opacity 0.3s ease; color: tomato;}
.form-control:-moz-placeholder                 {opacity: 1; transition: opacity 0.3s ease; color: tomato;}
.form-control:-ms-input-placeholder            {opacity: 1; transition: opacity 0.3s ease; color: tomato;}
.form-control:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease; color: tomato;}
.form-control:focus::-moz-placeholder          {opacity: 0; transition: opacity 0.3s ease; color: tomato;}
.form-control:focus:-moz-placeholder           {opacity: 0; transition: opacity 0.3s ease; color: tomato;}
.form-control:focus:-ms-input-placeholder      {opacity: 0; transition: opacity 0.3s ease; color: tomato;}