JSFiddle - React, Tailwind, and code Playground

by sibin va

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <form name="registration_form" id='registration_form' class="form-inline ">
        <div class="row">
            <div class="form-group col-xs-6">
                <label for="firstname" class="sr-only"></label>
                <input id="firstname" class="form-control input-group-lg reg_name" type="text" name="firstname"
                       title="Enter first name"
                       placeholder="First name"/>
            </div>

            <div class="form-group col-xs-6">
                <label for="lastname" class="sr-only"></label>
                <input id="lastname" class="form-control input-group-lg reg_name" type="text" name="lastname"
                       title="Enter last name"
                       placeholder="Last name"/>
            </div>
      
        <div class="form-group col-xs-12">
            <label for="username" class="sr-only"></label>
            <input id="username" class="form-control input-group-lg" type="text" autocapitalize='off' name="username"
                   title="Enter username"
                   placeholder="Username"/>
        </div>
       
        <div class="form-group col-xs-12">
            <label for="password" class="sr-only"></label>
            <input id="password" class="form-control input-group-lg" type="password" name="password"
                   title="Enter password"
                   placeholder="Password"/>
        </div>
        </div>
</form>

CSS

#registration_form{
    margin:20px !important;
}