JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css">
            <div class="navbar navbar-default navbar-fixed-top" role="navigation">
                <div class="email-input navbar-left">
                    <div id="input-group-email" class="input-group">
                        <input id= "email-input-box" type="email" class="form-control" name = "email" placeholder="[email protected]" autocomplete="on" autofocus="autofocus" required="required">
                        <span class="input-group-btn">
                            <button id="submit-email-btn" class="btn btn-default" type="button" disabled>Get Notified!</button>
                        </span>
                    </div>

                <div id="notified-alert" style="display:none; font-size: 18px;font-family: 'calibri'; color: grey; margin-top: 8px; margin-left: -50%;">We stand notified ... :)</div>
                </div>
                <p class="navbar-text navbar-right">
		<span class="arrorPos">Login <i class="fa fa-play"></i></span>
                    <i class="fa fa-facebook-square fa-2x"></i>
                    <i class="fa fa-twitter-square fa-2x"></i>
                </p>
            </div>

CSS

.navbar-text {
    margin-top:5px;
    margin-bottom:5px;
}