JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabs">
    <nav>
        <ul class="tab-nav" role="tablist">
            <li><a href="#item1" role="tab" aria-controls="item1" role="presentation" id="tab1">Item 1</a></li>
            <li><a href="#item2" role="tab" aria-controls="item2" role="presentation" id="tab2">Item 2</a></li>
            <li><a href="#item2" role="tab" aria-controls="item3" role="presentation" id="tab3">Item 3</a></li>
        </ul>
    </nav>
    <ul>
        <li class="tab-item" id="item1" role="tabpanel" aria-labelledby="tab1">
            <img src="http://placekitten.com/200/300" alt="">
            I'm tab one
        </li>
        <li class="tab-item" id="item2" role="tabpanel" aria-labelledby="tab2">
            <img src="http://placekitten.com/400/300" alt="">
            I'm tab two
        </li>
        <li class="tab-item" id="item3" role="tabpanel" aria-labelledby="tab3">
            <img src="http://placekitten.com/100/400" alt="">
            I'm tab three
        </li>
    </ul>
</div>

    <script>
        var tabs = $.tabs('.tabs', {
            onShow: function(nav, item) {
                console.log(nav, item)
            }                
        });
    </script>

CSS

ul, li {
                margin: 0;
                padding: 0;
            }
            .tab-nav li {
                display: inline-block;
            }
            .tab-nav a {
                display: block;
                padding: 1em;
                background-color: #ddd;
            }
            .tab-current a {
                background-color: #bbb;
            }
            .js-tabs-active .tab-item {
                display: none;
            }
            .js-tabs-active .tab-item.tab-current {
                display: block;
            }
            .tab-item {
                background-color: #ddd;
            }
            .tab-item.tab-current {
                background-color: #bbb;
        }