JSFiddle - React, Tailwind, and code Playground

by stevelove

HTML

<form class="tabs">

   <fieldset class="tab active">
       <legend>Tab One</legend>

       <div class="content">
           stuff
       </div>
    </fieldset>

   <fieldset class="tab">
       <legend>Tab Two</legend>

       <div class="content">
           more stuff
       </div>
   </fieldset>

    <fieldset class="tab">
       <legend>Tab Three</legend>

       <div class="content">
           even more stuff
       </div>
   </fieldset>

</form>

CSS

fieldset {
    border:0 none;
}

.tabs {
  position: relative;
  min-height: 200px; /* This part sucks */
  clear: both;
  margin: 25px 0;
}
.tab {
  float: left;
}
.tab legend {
  background: #eee;
  cursor:pointer;
  padding: 10px;
  border: 1px solid #ccc;
  margin-left: -1px;
  position: relative;
  left: 1px;
}

.content {
  position: absolute;
  top: 38px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc;
}

.active legend {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
.active .content {
  z-index: 1;
}

JavaScript

$('legend').live("click", function(ev) {
    $('.active').removeClass('active');
    $(ev.target).parent().addClass('active');
});