JSFiddle - React, Tailwind, and code Playground

by boushley

HTML

<script src="https://raw.github.com/boushley/InVision-Challenge/master/src/tabui.js"></script>
<div class="tabs">
    <ul>
        <li class="selected">
            <h3>Tab 1</h3>
            <div>
                <h4>This is my tab content</h4>
                <p>Some more content</p>
            </div>
        </li>
        <li>
            <h3>Tab 2</h3>
            <div>
                <h4>This is my other tab 2 contents</h4>
                <p>Some more other content</p>
            </div>
        </li>
        <li>
            <h4>Tab 3</h4>
            <div>
                <h5>This is my other tab 3 contents</h5>
                <p>Some more other content</p>
            </div>
        </li>
        <li>
            <h3>Tab 4</h3>
            <div>
                <h4>This is my other tab 4 contents</h4>
                <p>Some more other content</p>
            </div>
        </li>
    </ul>
</div>

CSS

.tabs > div {
    border: 1px solid black;
    border-top: 0;
    padding: 10px;
}

.tabs ul {
    margin: 0;
    padding: 0;
}

.tabs ul li {
    list-style: none;
    border: 1px solid black;
    padding: 0 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.tabs ul li.selected {
    border-bottom: 1px solid white;
}

JavaScript

var options = {
    tabChangeHandler: function (tab) {
        console.log('Tab Selected');
        console.log(tab);
    }
},

tabControl = $('.tabs').tabui(options);