JSFiddle - React, Tailwind, and code Playground

by AndrewBuntsev

HTML

<script>
    const _tabHeaders = [];
const _tabPages = [];
let _pageContainer;


function tab(elementId) {
    console.log('Trying to tabify the element ' + elementId);

    const root = document.getElementById(elementId);
    if (!root) {
        console.error('Cannot find an element with ID=' + elementId);
        return;
    }

    const tabPages = root.getElementsByClassName('tabPage');
    console.log(tabPages.length + ' tab pages found');

    //Extract tab headers and tab content
    Array.from(tabPages).forEach((tabPage, index) => extractTabPage(tabPage, index));

    //Clear root content
    root.innerHTML = "";

    //Build new content
    buildTabButtons(root);

    //Build page container
    buildPageContainer(root);

    //Select the first tab
    clickTab(0);
}


function extractTabPage(tabPage, index) {
    if (!tabPage) {
        console.error('Cannot add NULL tab page');
        return;
    }

    const pageHeader = tabPage.getElementsByClassName('tabHeader')[0];
    if (!pageHeader) {
        console.warn("Cannot add a tab page without a header. No header - no page. That's it.")
        return;
    }

    const pageContent = tabPage.getElementsByClassName('tabPageContent')[0];
    if (!pageContent) {
        console.warn("Cannot add a tab page without a content. No content - no page. Pretty obvious, isn't it?")
        return;
    }

    console.log('Adding new page ' + pageHeader.innerText);
    _tabHeaders.push(createHeaderButton(pageHeader.innerText, index));
    _tabPages.push(pageContent.innerHTML);
}


function createHeaderButton(headerText, index) {
    let headerButton = document.createElement('div');
    headerButton.innerText = headerText;
    headerButton.setAttribute('class', 'headerButton');
    headerButton.setAttribute('onclick', `clickTab(${index})`);
    return headerButton;
}


function buildTabButtons(root) {
    //Create the tab buttons container
    let buttonsContainer = document.createElement('div');
   ...

CSS

.buttonsContainer {
  margin-left: 5px;
}

.pageContainer {
  border: 1px gray solid;
  box-shadow: gray 3px 3px;
  padding: 10px;
}

.headerButton {
  display: inline-block;
  font-size: 20px;
  background-color: #e1c340;
  padding: 2px 10px;
  border: 1px gray solid;
  border-top-left-radius: 7px 20px;
  border-top-right-radius: 7px 20px;
  margin-left: -5px;
  position: relative;
  cursor: pointer;
}

.active {
  z-index: 10;
  background-color: #f8ea8c;
  padding: 2px 15px;
}