JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<div class="SFAEquipmentGrant">
<div class="wizard">
    <div class="wizard-header">
        <h3><abbr title="School Food Authority">SFA</abbr> Equipment Assistance Grant Application <small>Fiscal Yeay 2014</small></h3>
        <p>This is where some brief instructions could be placed.</p>
    </div>
    
    <div class="alert alert-info">
        <i class="fa fa-info-circle fa-lg fa-fw"></i><strong>Deadline:</strong> Applications must be submitted by <strong>MM/DD/YYYY</strong>.
    </div>
    
    <!-- Start Bootstrap Nav Wizard -->
    <ul class='nav nav-wizard'>
        <li><a href="#">
            Eligibility<i class="fa fa-check-square-o"></i>
            </a></li>
        <li><a href="#">
            Site Applications<i class="fa fa-check-square-o"></i>
            </a></li>
        <li class="active"><a>
            Review<i class="fa fa-square-o"></i>
            </a></li>
        <li class="disabled"><a>
            Submit<i class="fa fa-flag-checkered"></i>
            </a></li>
    </ul>
    <!-- End Bootstrap Nav Wizard -->
    
    <!-- Start Custom Wizard Navigation -->
    <!-- Original code from: http://jsfiddle.net/H7J94/ -->
    <div class="wizard-nav">
        <a href="#">
            Eligibility<i class="fa fa-check-square-o"></i>
        </a>
        <a href="#">
            Site Applications<i class="fa fa-check-square-o"></i>
        </a>
        <a href="#" class="current">
            Review<i class="fa fa-square-o"></i>
        </a>
        <a>
            Submit<i class="fa fa-flag-checkered"></i>
        </a>
    </div>
    <!-- End Custom Wizard Navigation -->
    
    <div class="wizard-progress">
        <div class="progress progress-striped active">
            <div class="progress-bar" role="progressbar" aria-valuenow="45"...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans); 
@import url(http://fonts.googleapis.com/css?family=Spinnaker);
body, .badge {
    font-family: 'Open Sans', sans-serif;
}
.fa {
    margin-left: 2px;
    margin-right: 2px;
}
.right-inline {
    text-align: right;
}
.SFAEquipmentGrant {
    margin: 0 8px;
    min-width: 250px;
}
.wizard-header {
    font-family:'Spinnaker', sans-serif;
}
.wizard-nav {
    font-family:'Spinnaker', sans-serif;
    padding-bottom: 4px;
}
.wizard-nav a {
    padding: 12px 12px 10px 30px;
    margin-right:5px;
    background:#efefef;
    position:relative;
    display:inline-block;
}
.wizard-nav a:before {
    width:0px;
    height:0px;
    border-top: 20px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #fff;
    position: absolute;
    content:"";
    top: 0;
    left: 0;
}
.wizard-nav a:after {
    width:0px;
    height:0px;
    border-top: 20px inset transparent;
    border-bottom: 20px inset transparent;
    border-left: 20px solid #efefef;
    position: absolute;
    content:"";
    top: 0;
    right: -20px;
    z-index:2;
}
.wizard-nav a:first-child:before {
    border:none;
}
.wizard-nav a:last-child:after {
    border:none;
}
.wizard-nav a:first-child {
    -moz-border-radius: 4px 0 0 4px;
    -webkit-border-radius: 4px 0 0 4px;
    border-radius: 4px 0 0 4px;
}
.wizard-nav a:last-child {
    -moz-border-radius: 0 4px 4px 0;
    -webkit-border-radius: 0 4px 4px 0;
    border-radius: 0 4px 4px 0;
}
.wizard-nav .badge {
    margin:0 5px 0 18px;
    position:relative;
    top:-1px;
}
.wizard-nav a:first-child .badge {
    margin-left:0;
}
.wizard-nav .current {
    background:#007ACC;
    color:#fff;
}
.wizard-nav .current:after {
    border-left-color:#007ACC;
}
/********************************************************************************/
ul.nav-wizard .fa {
    margin-left: 5px;
}
ul.nav-wizard {
    margin: 4px 0;
    font-family:'Spinnaker', sans-serif;
}
...