JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<script src="http://semantic-ui.com/build/packaged/javascript/semantic.js"></script>
<link rel="stylesheet" href="http://semantic-ui.com/build/packaged/css/semantic.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/noisy/1.1.1/jquery.noisy.min.js"></script>
<div class="ui two column middle aligned relaxed grid basic segment">
  <div class="column">
    <div class="ui form segment">
      <div class="field">
        <label>Username</label>
        <div class="ui left labeled icon input">
          <input type="text" placeholder="Username">
          <i class="user icon"></i>
          <div class="ui corner label">
            <i class="asterisk icon"></i>
          </div>
        </div>
      </div>
      <div class="field">
        <label>Password</label>
        <div class="ui left labeled icon input">
          <input type="password">
          <i class="lock icon"></i>
          <div class="ui corner label">
            <i class="asterisk icon"></i>
          </div>
        </div>
      </div>
      <div class="ui blue submit button">Login</div>
    </div>
  </div>
  <div class="ui vertical divider">11111111111|1111111111</div>
  <div class="center aligned column">
    <div class="huge green ui labeled icon button">
      <i class="signup icon"></i>
      Sign Up
    </div>
  </div>
</div>

CSS

html, body {
    height: 100%;
}
html, body {
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
}

.ui.vertical.divider {
    white-space: pre;
    text-align: center;    
    width: auto !important;
}