JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<input type="phone" placeholder="Phone" />
<br/>
<br/>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">
       <input type="text" class="form-control" placeholder="Name" />
    </div>
    <div class="col-md-4">
       <input type="email" class="form-control" placeholder="Email" />
    </div>
    <div class="col-md-4">
       <input type="phone" class="form-control" placeholder="Phone" />
    </div>
    <div class="col-md-4">
       <textarea name="contact[message]" class="form-control"></textarea>
		</div>
  </div>
</div>

CSS

input.form-control[type=text], input.form-control[type=email], input.form-control[type=phone]{
  background:rgba(56, 56, 56, 0.1);
  border:1px solid #ddd;
  box-shadow:none;
}
input.form-control[type=text]:focus, input.form-control[type=email]:focus, input.form-control[type=phone]:focus{
  background:#fff;
}

textarea.form-control{
  background:rgba(56, 56, 56, 0.1);
  border:1px solid #ddd;
  box-shadow:none;
}
textarea.form-control:focus{
  background:#fff;
}