JSFiddle - React, Tailwind, and code Playground

by Chandan D Nadig

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
    <div class="container">
      <h2>Contact Information <button class="btn btn-default btn-xs pull-right">    <i class="icon-pencil pencil-input-change"></i></button></h2>
      <form class="form-horizontal form-group-sm" role="form">
    <div class="form-group">
          <label class="control-label col-sm-2" for="name">Name:</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="name" required max-length="50" placeholder="Enter Name">
          </div>
        </div>  
    <div class="form-group">
          <label class="control-label col-sm-2" for="email">Email:</label>
          <div class="col-sm-10">
            <input type="email" class="form-control" id="email" required pattern="[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?" placeholder="Enter Email">
          </div>
        </div>   
    <div class="form-group">
          <label class="control-label col-sm-2" for="number">Phone Number:</label>
          <div class="col-sm-10">
            <input type="number" class="form-control" id="number" required max-length="15" placeholder="Enter Phone Number">
          </div>
        </div>   
    <div class="form-group">
          <label class="control-label col-sm-2" for="address">Address:</label>
          <div class="col-sm-10">
            <textarea class="form-control" id="address" placeholder="Enter Address"></textarea>
          </div>
        </div>
        <div class="form-group pull-right">        
          <div class="col-sm-offset-2 col-sm-10">
            <button type="button" class="btn btn-default">Cancel</button>
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </div>
      </form>
    </div>