JSFiddle - React, Tailwind, and code Playground

by Prajeesh_PR

HTML

<form class="card card-block bg-faded">
  <legend class="m-b-1 text-xs-center">Sign up</legend>

  <div class="form-group input-group">
    <span class="has-float-label">
      <input class="form-control" id="first" type="text" placeholder="Name"/>
      <label for="first">First</label>
    </span>
    <label class="has-float-label">
      <input class="form-control" type="text" placeholder="Surname"/>
      <span>Last</span>
    </label>
  </div>

  <div class="form-group input-group">
    <span class="input-group-addon">@</span>
    <label class="has-float-label">
      <input class="form-control" type="email" placeholder="[email protected]" value="[email protected]"/>
      <span>Email</span>
    </label>
  </div>

  <div class="form-group has-float-label">
    <input class="form-control" id="password" type="password" placeholder="••••••••"/>
    <label for="password">Password</label>
  </div>

  <label class="form-group has-float-label">
    <select class="form-control custom-select">
      <option selected>United States</option>
      <option>Canada</option>
      <option>...</option>
    </select>
    <span>Country</span>
  </label>

  <div class="form-group">
    <label class="custom-control custom-checkbox">
      <input class="custom-control-input" type="checkbox"/>
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description">Subscribe to newsletter</span>
    </label>
  </div>

  <button class="btn btn-block btn-primary" type="submit">Sign up</button>
</form>

<!---->

<a href="https://github.com/tonystar/bootstrap-float-label" target="_blank">
  <img src="https://img.shields.io/github/stars/tonystar/bootstrap-float-label.svg?style=social&label=Star"/>
</a>