JSFiddle - React, Tailwind, and code Playground

by apaul34208

HTML

<script src="http://os.alfajango.com/js/jquery.easytabs.min.js"></script>
<script src="http://os.alfajango.com/js/jquery.hashchange.min.js"></script>
<div id="ajax-tab-container" class='tab-container'>
    <ul class='tabs'>
        <li class='tab'><a href="http://fiddle.jshell.net/dirtyd77/kC2Wn/1/show/" data-target="#tabs-ajax-1">Page 1</a>

        </li>
        <li class='tab'><a href="http://fiddle.jshell.net/dirtyd77/kC2Wn/2/show/" data-target="#tabs-ajax-2">Page 2</a>

        </li>
    </ul>
    <div class='panel-container'>
        <div id="tabs-ajax-1"></div>
        <div id="tabs-ajax-2"></div>
    </div>
</div>

CSS

.etabs {
    margin: 0;
    padding: 0;
}
.tab {
    display: inline-block;
    zoom:1;
    *display:inline;
    background: #eee;
    border: solid 1px #999;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
}
.tab a {
    font-size: 14px;
    line-height: 2em;
    display: block;
    padding: 0 10px;
    outline: none;
    text-decoration: none;
}
.tab a:hover {
    text-decoration: underline;
}
.tab.active {
    background: #fff;
    padding-top: 6px;
    position: relative;
    top: 1px;
    border-color: #666;
}
.tab a.active {
    font-weight: bold;
}
.tab-container .panel-container {
    background: #fff;
    border: solid #666 1px;
    padding: 10px;
    border-radius: 0 4px 4px 4px;
    -webkit-border-radius: 0 4px 4px 4px;
}

JavaScript

$(document).ready(function () {
    $('#ajax-tab-container').easytabs();
});