JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>
    <ul class='tabs'>
        <li class='tab-link current' data-tab='tab-1'>ViewA</li>
        <li class='tab-link' data-tab='tab-2'>ViewB</li>
    </ul>
    <div id='tab-1' class='tab-content current'>
        <select class="sel">
            <option class="one" value="one">1</option>
            <option class="two" value="two">2</option>
        </select>
        <table>
            <tr>
                <th>Module</th>
                <th>Units</th>
                <th class="choice one">Choice One</th>
                <th class="choice two">Choice Two</th>
            </tr>
            <tr>
                <td>type1</td>
                <td>5000</td>
                <td class="choice one">100</td>
                <td class="choice two">200</td>
            </tr>
            <tr>
                <td>type2</td>
                <td>350</td>
                <td class="choice one">40</td>
                <td class="choice two">90</td>
            </tr>
        </table>
    </div>
    <div id='tab-2' class='tab-content'>
        <select class="sel">
            <option class="one" value="one">1</option>
            <option class="two" value="two">2</option>
        </select>
        <table>
            <tr>
                <th>Module</th>
                <th>Units</th>
                <th class="choice one">Choice One</th>
                <th class="choice two">Choice Two</th>
            </tr>
            <tr>
                <td>type1</td>
                <td>55.56</td>
                <td class="choice one">2.9</td>
                <td class="choice two">9.87</td>
            </tr>
            <tr>
                <td>type2</td>
                <td>350</td>
                <td class="choice one">4.05</td>
                <td class="choice two">8.77</td>
            </tr>
        </table>
    </div>
</div>

CSS

body {
     margin-top: 1px;
     font-family:'Trebuchet MS', serif;
     line-height: 1.6
 }
 .container {
     position: absolute;
     width: 25%;
     margin: 0 auto;
 }
 ul.tabs {
     margin: 0px;
     padding: 0px;
     list-style: none;
 }
 ul.tabs li {
     background: none;
     color: #222;
     display: inline-block;
     padding: 10px 15px;
     cursor: pointer;
     border: 3px solid red;
     width: 25%;
     font-family: Verdana;
     font-size: 8pt;
     text-align: center;
     font-weight: normal;
 }
 ul.tabs li.current {
     background: #ededed;
     color: #222;
     font-family: Verdana;
     font-size: 10pt;
     text-align: center;
     font-weight: bold;
 }
 .tab-content {
     display: none;
     background: none;
     padding: 15px;
 }
 .tab-content.current {
     display: inherit;
 }

JavaScript

$(document).ready(function () {
    $('.sel').change(function(){
        $('.choice').hide();
        $( '.'+this.value).show();
        $('.sel').val( this.value );
    });
    
    $('ul.tabs li').click(function () {
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');
        $(this).addClass('current');
        $('#' + tab_id).addClass('current');
    });
});