JSFiddle - React, Tailwind, and code Playground

by wolfpackt99

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<body>
    <div class="container-fluid">
        <div >
            <div class='login-box'>
                <div class='row'>
                    <div class='col-sm-6 col-md-6'>
                         <h1 class='logo'>Firm Manager</h1>

                    </div>
                    <div class='col-sm-6 col-md-6'><span class="needHelp">Need Help? 877-516-8260</span>

                    </div>
                </div>
                <p class='text-center sign-in-text'>Sign in to your account</p>
                <form class='form-horizontal'>
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-3 control-label">Email <span class="glyphicon glyphicon-question-sign"></span>
                        </label>
                        <div class="col-sm-9">
                            <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-3 control-label">Password</label>
                        <div class="col-sm-9">
                            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-3 col-sm-9">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox">Remember me</label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group ">
                        <div class="col-sm-offset-3 col-sm-9 pull-right">
                            <button type="submit" class="btn...

CSS

html, body {
    height: 100%;
}
body {
    background-image: url(https://app.firmmanager.com/login/content/register/images/bg.png);
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center center;
}
.vertical-center {
    min-height: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.login-box {
    background-color: #FFF;
    border: 1px solid #c5c5c5;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, .3);
    box-shadow: 0 3px 3px rgba(0, 0, 0, .3);
    padding: 10px;
    mid-width: 250px;
}
.sign-in-text {
    font-family:'Open Sans', sans-serif;
    font-size: 22px;
    line-height: 1;
    color: #105195;
    margin-top: 25px;
    margin-bottom: 25px;
}
.needHelp {
    height: 36px;
    background-image: url(https://app.firmmanager.com/login/content/register/images/need-help.png);
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 42px;
    font-size: 10px;
    color: #4e4e4e;
    line-height: 36px;
    display: block;
}
.btn-primary {
    background-color: #dd0000;
}
.btn-primary:hover {
    background-color: #cc0033;
}
.logo {
    display: block;
    background-image: url(http://www.lexisnexis.com/risk/img/logo-lexisnexis.png);
    height: 38px;
    width: 179px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    background-repeat: no-repeat;
    background-position: left top;
    text-indent: -9999px;
}