JSFiddle - React, Tailwind, and code Playground

by gmcalab

HTML

<div class="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

.tabs {
    padding:0 20px;
    border-bottom: 1px solid red;
}
.tabsSelect select {
    width: 100%;
}
#navigation {
    position: relative;
    top: 1px;
    margin: 0;
    padding: 0;
    display: table;
    table-layout:fixed;
    width: 100%;
}
#navigation > div {
    -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;
}
#navigation > div: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) {
    .tabs {
        display: block;
    }
    .tabsSelect {
        display: none;
    }
}
@media all and (max-width: 300px) {
    .tabs {
        display: none;
    }
    .tabsSelect {
        display: block;
    }
}

JavaScript

$(function () {

    
  

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

    $('#navigation div').each(function () {
        var o = $("<option></option>")
            .data("id", $(this).data('id'))
            .data("tab", $(this))
            .text($(this).text());

        sel.append(o);

        $(this).data('tab', o);
    });

    div.append(sel);
update($('.active').data('id'), $('.active'));
    $('.tabs').after(div);

    $('.tabsSelect select').on('change', function () {
       
        var id = $(this).find(':selected').data('id');
        update(id, $(this).find(':selected'));
    });

    $('#navigation > div').on('click', function () {
       var id = $(this).data('id');
       update(id, $(this));
 });
});

function update(id, obj) {
   
    var tab = obj;
    if (!obj.is('div')) 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();
}