JSFiddle - React, Tailwind, and code Playground

by Guilherme Santana

HTML

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js">


</script>

<div id="tabs">
</div>

CSS

@import url('https://www.cssscript.com/wp-includes/css/sticky.css');
@import url('https://netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css');
@import url('https://netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');
.nav.nav-tabs.bs-adaptive-tabs li a label {
  font-weight: normal;
}

@media (max-width: 768px) {
  .nav.nav-tabs.bs-adaptive-tabs {
    position: relative;
    height: 45px;
    margin-bottom: 50px;
    outline: none;
  }
  .nav.nav-tabs.bs-adaptive-tabs li {
    position: static;
  }
  .nav.nav-tabs.bs-adaptive-tabs li:nth-child(n+6) {
    visibility: hidden;
    float: right;
    clear: right;
    z-index: 10;
    margin-left: -100%;
    transition: visibility .3s;
  }
  .nav.nav-tabs.bs-adaptive-tabs li:nth-child(-n+5) {
    width: 16.6%;
    /*  100/(5+1)  */
    text-align: center;
  }
  .nav.nav-tabs.bs-adaptive-tabs li:nth-child(6) {
    margin-top: 44px;
  }
  .nav.nav-tabs.bs-adaptive-tabs li:nth-child(5):after {
    content: "\f142";
    font-family: "FontAwesome";
    cursor: pointer;
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    padding: 10px 15px;
  }
  .nav.nav-tabs.bs-adaptive-tabs:focus:hover li {
    visibility: visible;
  }
  .nav.nav-tabs.bs-adaptive-tabs li a {
    position: static;
  }
  .nav.nav-tabs.bs-adaptive-tabs li:nth-child(n+6) a {
    background-color: #fff;
    border-color: #ddd;
    border-radius: 0;
    margin-top: 0;
    margin-right: 0;
  }
  .nav.nav-tabs.bs-adaptive-tabs li a label {
    visibility: hidden;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 10px 15px;
  }
  .nav.nav-tabs.bs-adaptive-tabs li.active a label {
    visibility: visible;
  }
  /*
This defines the workspace where i place the demo.
*/
  #container {
    text-align: left;
    background: #FFF;
    width: 865px;
    margin: 20px auto;
    padding: 20px;
    border-left: 1px solid #CCC;
    border-right: 1px solid #CCC;
    -moz-box-shadow: 0px 0px 10px #BBB;
   ...

JavaScript

var areas = ['Transformer', 'Input', 'Ventilator1', 'Ventilator2', 'General'];

var tabsContainer = document.getElementById("tabs");

tabsContainer.innerHTML = "";

var uList = document.createElement("ul");
uList.className = "nav nav-tabs bs-adaptive-tabs";
$('').removeClass('');
for (var i = 0; i <= areas.length - 1; i++) {

  var TabTitle = document.createElement("li");
  TabTitle.classname = '';
  TabTitle.innerHTML = '<a href="#tabs-' + areas[i] + '">' + areas[i] + '</a>';

  if (i == 0)
    TabTitle.classname = "active";

  tabsContainer.appendChild(uList);
}

for (var i = 0; i <= areas.length - 1; i++) {

  var tabContent = document.createElement("div");
  tabContent.classname = "tab-pane";
  tabContent.id = "tabs-" + areas[i];
  tabContent.innerHTML = "Tab Name: " + tabContent.id;

  tabsContainer.appendChild(tabContent);
}

$("#tabs").tabs();