JSFiddle - React, Tailwind, and code Playground

by fatfantasma

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <form name="registration_form" id='registration_form' class="form-inline">

            <div class="form-group">
                <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">
                <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">
            <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">
            <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>
        
</form>

CSS

.reg_name {
    max-width:200px;
}