JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="main">
  <ul class="tabs">
    <li><a href="#tab-1">Erster</a></li>
    <li><a href="#tab-2">Zweiter</a></li>
    <li><a href="#tab-3">Dritter</a></li>
  </ul>
  <div id="tab-1">Der erste Tab.</div>
  <div id="tab-2">Hier ist schon der zweite Tab.</div>
  <div id="tab-3">Uuuuuuund ... der dritte Tab!</div>
</div>

CSS

*{
  margin: 0px;
  padding: 0px;
}
BODY{
  padding: 10px;
}
#main .tabs {
  padding: 0px;
  margin: 0px;
}

#main ul li {
  width: auto;
  height: auto;
  padding: 5px 10px 5px 10px;
  float: left;
  list-style: none;
  margin: 0px;
  background: #000;
  color: #fff;
}
#main div:nth-child(n) {
  clear:left
}
#main div {
  background: #444;
  color: #fff;
  padding: 10px;
}

JavaScript

$(function() {
  $('#main').tabs();
});