JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" 
rel="stylesheet" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<div role="tabpanel">
    <ul class="nav nav-tabs" role="tablist">
        
        <li role="tab" class="active">
            <label data-target="#scheduleDaily">
                <input id="optDaily" name="intervaltype" type="radio" checked />
                Daily
            </label>
        </li>
        
        <li role="tab">
            <label data-target="#scheduleWeekly">
                <input id="optWeekly" name="intervaltype" type="radio" />
                Weekly
            </label>
        </li>
        
        <li role="tab">
            <label data-target="#scheduleMonthly">
                <input id="optMontly" name="intervaltype" type="radio" />
                Monthly
            </label>
        </li>
        
    </ul>
    
    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="scheduleDaily">
            <h3>Daily content...</h3>
        </div>
        
        <div role="tabpanel" class="tab-pane" id="scheduleWeekly">
            <h3>Weekly content...</h3>
        </div>
        
        <div role="tabpanel" class="tab-pane" id="scheduleMonthly">
            <h3>Monthly content...</h3>
        </div>
    </div>
    
</div>

CSS

body {
    padding: 1em;
}

/* Mimic Bootstrap's .nav-tabs>li(.active)>a 
   when using radio buttons instead of links in tab headers */
.nav-tabs>li>label
{
    display: inline-block;
    padding: 1em;
    margin: 0;
    border: 1px solid transparent;
    cursor: pointer;
}
.nav-tabs>li.active>label
{
    cursor: default;
    border-color: #ddd;
    border-bottom-color: white;
}

JavaScript

$('input[name="intervaltype"]').click(function () {
    //jQuery handles UI toggling correctly when we apply "data-target" attributes and call .tab('show') 
    //on the <li> elements' immediate children, e.g the <label> elements:
    $(this).closest('label').tab('show');
});