JSFiddle - React, Tailwind, and code Playground

by Love Trivedi

HTML

<div class="container registration-container">
    <div class="row">
        <div class="span6">
            <form class="form-horizontal" id="registerHere" method='post' action=''>
            <fieldset>
                <legend>Registration</legend>

                <div class="control-group">
                    <label class="control-label">Name</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" id="user_name" name="user_name" rel="popover" data-content="Enter your first and last name." data-original-title="Full Name">
                    </div>
                </div>


                <div class="control-group">
                    <label class="control-label">Email</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" id="user_email" name="user_email" rel="popover" data-content="What’s your email address?" data-original-title="Email">
                    </div>
                </div> 

                <div class="control-group">
                    <label class="control-label"></label>
                    <div class="controls">
                        <button type="submit" class="btn btn-success" >Create My Account</button>
                    </div>
                    <div class="control-group success">
                        <!-- TODO -->
                    </div>
                    <div class="control-group error">
                        <!-- TODO -->
                    </div>
                </div>
            </fieldset>
            </form>
        </div>
    </div>
</div>

CSS

.registration-container{
position: relative;
background: rgba(240, 248, 255, 0.5);
width: 600px;
 margin:0px auto;
}

legend{
text-align: center;
}