JSFiddle - React, Tailwind, and code Playground

by Julien Vernet

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://git.aaronlumsden.com/progression/css/progression.css">
<script src="//git.aaronlumsden.com/progression/js/progression.min.js"></script>
<form role="form" id="demoform">
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email" data-progression="" data-helper="Example tooltip 1">
    </div>
    <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" data-progression="" data-helper="Example tooltip 2">
    </div>
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" id="exampleInputFile">
        <p class="help-block">Example block-level help text here.</p>
    </div>
    <div class="checkbox">
        <label>
            <input type="checkbox" data-progression="" data-helper="Example tooltip 3">Check me out</label>
    </div>
    <div class="radio">
        <label>
            <input type="radio" data-progression="" data-helper="Example tooltip 4">I'm a radio input</label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
</form>

CSS

form {
    max-width: 500px;
    margin: 5% auto;
}

JavaScript

$("#demoform").progression();