JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<article>
    <div class="container pull-center">
  <div class="border">
     
    <h2>How do you want to log in?</h2>
    <div class="well">
      <h4>With username and password</h4>
      <form id="ut-ldap-form" method="post" name="f" class="form-inline" role="form" _lpchecked="1">
        <div class="row">
          <div class="form-group col-sm-4 col-md-3 col-lg-2">
            <label for="username" class="sr-only">Username</label>
            <input id="username" type="text" tabindex="1" name="username" class="form-control" placeholder="Username" value="">
          </div>
          
          <div class="form-group col-sm-4 col-md-3 col-lg-2">
            <label for="password" class="sr-only">Password</label>
            <div class="input-group">
              <input id="password" type="password" tabindex="2" name="password" class="form-control" placeholder="Password">
              <span class="input-group-btn">
                <button class="btn btn-default password-toggle" type="button">
                  <span class="glyphicon glyphicon-eye-open"></span>
                </button>
              </span>
            </div>
          </div>
          <div class="form-group col-sm-2 col-md-2 col-lg-1">
            <button type="submit" tabindex="3" class="btn btn-primary">Login</button>
          </div>
        </div>
      </form>
    </div>

    <div class="well">
      <h4>More securely with Mobile-ID or ID-card</h4>
      
      <div class="authsource ut-mobiilid">
        <a href="https://example.com/mobiilid" data-authsource-name="ut-mobiilid" title="Log in using Mobile-ID">
          Log in using Mobile-ID    </a>
      </div>
      <div class="authsource ut-idkaart">
        <a href="https://example.com/idkaart" data-authsource-name="ut-idkaart" title="Log in using ID-card">
          Log in using ID-card    </a>
      </div>
    </div>
  </div> <!-- div.border -->
    </div><!-- end container -->
</article>

CSS

@import url('http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');

div.border {
	display: inline-block;
	border: 1px solid #205081;
	padding: 28px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

/* Center on big screens */

  .pull-center {
      text-align: center;
  }
  .pull-center * {
    text-align: left;
  }
  .pull-center button, .pull-center input[type=button] {
  	text-align: center;
  }