JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="tabs" lang="la" class="clearfix">
    <li class="active"><strong><a href="#lorem">Lorem</a></strong></li>
    <li><a href="#ipsum">Ipsum</a></li>
    <li><a href="#dolor">Dolor</a></li>
</ul>
<div id="lorem" class="tabs active" lang="la">
    <p>Lorem…</p>
    <p>Lorem…</p>
    <p>Lorem…</p>
</div>
<div id="ipsum" class="tabs" lang="la">
    <p>Ipsum…</p>
    <p>Ipsum…</p>
    <p>Ipsum…</p>
</div>
<div id="dolor" class="tabs" lang="la">
    <p>Dolor…</p>
    <p>Dolor…</p>
    <p>Dolor…</p>
</div>

CSS

.clearfix:after
{
    visibility: hidden;
    display: block;
    font-size: 0;
    content: ' ';
    clear: both;
    height: 0;
}
body
{
    padding: 40px 0 0;
    font-family: sans-serif;
    background-color: #3D668F;
}
#tabs
{
    border-bottom: 1px solid #000;
    padding-left: 40px;
}
#tabs li
{
    float: left;
    position: relative;
    z-index: 10;
}
#tabs li.active
{
    z-index: 20;
}
#tabs a
{
    display: block;
    padding: 10px;
    border: 1px solid #000;
    background-color: #FFF;
    margin-bottom: -1px;
    margin-right: -1px;
    -webkit-border-top-left-radius:  10px;
    -webkit-border-top-right-radius: 10px;
       -moz-border-top-left-radius:  10px;
       -moz-border-top-right-radius: 10px;
        -ms-border-top-left-radius:  10px;
        -ms-border-top-right-radius: 10px;
         -o-border-top-left-radius:  10px;
         -o-border-top-right-radius: 10px;
            border-top-left-radius:  10px;
            border-top-right-radius: 10px;
    z-index: 10;
    color: #000;
    text-decoration: none;
}
#tabs a:hover,
#tabs a:focus
{
    text-decoration: underline;
}
#tabs strong
{
    font-weight: normal;
}
#tabs strong:before
{
    position:absolute;
    left: -9px;
    bottom: -1px;
    content: '';
    width:  10px;
    height: 10px;
    background-color: #EAEAEA;
}
#tabs li:first-child strong a:before
{
    background-color: #3D668F;
}
#tabs strong:after
{
    position:absolute;
    right: -10px;
    bottom: -1px;
    content: '';
    width:  10px;
    height: 10px;
    background-color: #EAEAEA;
    z-index: 30;
}
#tabs li:last-child strong a:after
{
    background-color: #3D668F;
}
#tabs strong a
{
    border-bottom-color: #EAEAEA;
    background-color: #EAEAEA;
    cursor: default;
    text-decoration: none!important;
}
#tabs strong a:before
{
    position:absolute;
    left: -10px;
    bottom: -1px;
    content: '';
    width:  10px;
    height: 10px;
    border-bottom: 1px solid #000;
    border-right:  1px solid #000;
   ...

JavaScript

jQuery(function(){
    jQuery('body').addClass('js');
    
    var tabs = jQuery('#tabs');
    
    tabs.find('a').click(function(e){
        e.preventDefault();
        
        var that = jQuery(this);
        var active = 'active';
        
        tabs.find('li').removeClass(active);
        tabs.find('strong').find('a').unwrap();
        
        that.closest('li').addClass(active);
        that.wrap('<strong />')
        
        jQuery('.tabs').removeClass(active);
        jQuery(that.attr('href')).addClass(active);
    });
});