JSFiddle - React, Tailwind, and code Playground

by Brett Miley

HTML

ACTIVE TABS


<div class="dsm-tabswrp">
    <label for="theradio1" class="dsm-tabslabel" onclick="">The Radio</label><label for="theradio2" class="dsm-tabslabel" onclick="">The Radio</label>
    <div class="dsm-tabs">
        <input type="radio" class="dsm-tabsradio" id="theradio1" name="alltheradios" />
        <div class="dsm-tabscontent">
            the content1
        </div>
        <input type="radio" class="dsm-tabsradio" id="theradio2" name="alltheradios" />
        <div class="dsm-tabscontent">
            the content2
        </div>
    </div>
</div>

CSS

.dsm-tabswrp{
    display:relative;
}
.dsm-tabslabel {
    padding:8px;
    display:inline-block;
    position:relative;
    margin-left:1px;
    border-radius:2px;
    transition: all 0.5s ease-in;
}
.dsm-tabslabel:hover {
    box-shadow:0px 0px 10px 0px rgba(50, 50, 50, 0.5);
}
.dsm-tabslabel:after {
    content: '';
    background: #ccc;
    background: linear-gradient(transparent, #ccc, transparent);
    width: 1px;
    height:24px;
    position: absolute;
    z-index: 15;
    right: -1px;
    top: 50%;
    margin-top:-12px;
}
.dsm-active-tab {
    background: #0dc0eb;
    background: linear-gradient(to bottom, #0dc0eb 0%,#0091ca 100%);
    color: #fff;
    position:relative;
}
.dsm-active-tab:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -15px;
    width: 0;
    height: auto;
    background: transparent;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid white;
}
.dsm-tabsradio{
    position:absolute;
    left:-9999px;
    top:0
}
.dsm-tabscontent{
    height:0px;
    overflow:hidden;
}
.dsm-tabsradio:checked + .dsm-tabscontent{
    height:100%;
}

JavaScript

jQuery(".dsm-tabs .dsm-tabsradio").change(function () {
    var id = jQuery(this).attr('id');
    jQuery(".dsm-tabswrp .dsm-tabslabel").removeClass("dsm-active-tab");
    jQuery(".dsm-tabslabel[for='" + id + "']").addClass("dsm-active-tab");
});