JSFiddle - React, Tailwind, and code Playground

by xylab

HTML

<link rel="stylesheet" href="bootstrap.css">
<div class="container" id="tabs">
    <div class="row">
        <div id="tab-container" class="span6 offset1">
    <ul class="nav nav-tabs" id="myTab">
        <li class="active"><a href="#tabs-1">Nunc tincidunt</a>
        </li>
        <li><a href="#tabs-2">Proin dolor</a>
        </li>
        <li><a href="#tabs-3">Aenean lacinia</a>
        </li>
    </ul>

    <div  class="input-group" id="tabs-1">
        <form>
            <input type="text"/>
        </form>
    </div>
    <div  class="input-group" id="tabs-2">
        <form>
            <input type="text"/>
        </form>
    </div>
    <div  class="input-group" id="tabs-3">
        <form>
            <input type="text"/>
        </form>
    </div>
        </div><!-- /.row -->
    </div><!-- /#tab-container -->
</div><!-- /.container -->

JavaScript

$('#tabs').tabs({
beforeActivate: function( event, ui ) {
   $(this).find('form').trigger('reset');
}
});