JSFiddle - React, Tailwind, and code Playground

by gmcalab

HTML

<div id="tabs">
    <div id="navigation">
        <div data-id="tab1">Tab 1</div>
        <div data-id="tab2">Tab 2</div>
        <div data-id="tab3" class='active'>Tab 3</div>
        <div data-id="tab4">Tab 4</div>
        <div data-id="tab5">Tab 5</div>
    </div>
</div>
<div class='content' id="tab1">hello1</div>
<div class='content' id="tab2">hello2</div>
<div class='content' id="tab3">hello3</div>
<div class='content' id="tab4">hello4</div>
<div class='content' id="tab5">hello5</div>

CSS

.tabsContainer {
    padding:0 20px;
    border-bottom: 1px solid red;
}
.tabsSelect {
    width: 100%;
}
.tabs {
    position: relative;
    top: 1px;
    margin: 0;
    padding: 0;
    display: table;
    table-layout:fixed;
    width: 100%;
}
.tab {
    -moz-border-radius: 5px 0 5px 0;
    -webkit-border-radius: 5px 5px;
    -khtml-border-radius: 20px 0 0 0;
    border-radius: 10px 10px 0 0;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    display: table-cell;
    border-right: 1px solid red;
    border-top: 1px solid red;
    border-bottom: 1px solid red;
    text-align: center;
    background-color: salmon;
    padding: 5px;
    cursor: pointer;
}
.tab:first-child {
    border-left: 1px solid red;
}
.active {
    border-bottom: 0 !important;
    background-color: white !important;
}
.content {
    display: none;
}
@media all and (min-width: 301px) {
    .tabsContainer {
        display: block;
    }
    .tabsSelect {
        display: none;
    }
}
@media all and (max-width: 300px) {
    .tabsContainer {
        display: none;
    }
    .tabsSelect {
        display: block;
    }
}

JavaScript

$(function () {
    initTabs('tabs');
});

function initTabs(id) {

    var $tabsContainer = $('#' + id);
    $tabsContainer.addClass('tabsContainer');

    var $tabs = $tabsContainer.find('> div');
    $tabs.addClass('tabs');

    var $tabsSelectContainer = $('<div></div>');
    $tabsSelectContainer.addClass('tabsSelectContainer');

    var $tabsSelect = $('<select></select');
    $tabsSelect.addClass('tabsSelect');

    $tabs.find('div').each(function () {

        var $tab = $(this);
        $tab.addClass('tab');

        var option = $("<option></option>")
            .data("id", $tab.data('id'))
            .data("tab", $tab)
            .text($tab.text());

        $tabsSelect.append(option);

        $tab.data('tab', option);
    });

    $tabsSelectContainer.append($tabsSelect);
    updateTab($('.active').data('id'), $('.active'));
    $tabsContainer.after($tabsSelectContainer);

    $tabsSelect.on('change', function () {

        var id = $(this).find(':selected').data('id');
        updateTab(id, $(this).find(':selected'));
    });

    $('.tab').on('click', function () {
        var id = $(this).data('id');
        updateTab(id, $(this));
    });
}

function updateTab(id, obj) {

    var tab = obj;
    if (!obj.hasClass('tab')) 
        tab = obj.data('tab');
    else {
        tab = obj;
        obj = tab.data('tab');
    }
    $('.content').hide();
    $('#navigation > div').removeClass('active');
    $(tab).addClass('active');
    $(obj).prop('selected', true);
    $('#' + id).show();
}