JSFiddle - React, Tailwind, and code Playground

HTML

<ul class='menu'>
    <li class="menu1">
        <a href='#menu1' >Tab 1</a>
        <a class="back">Back 1</a>
    </li>
    <li class="menu2">
        <a href='#menu2'>Tab 2</a>
        <a class="back">Back 2</a>
    </li>
    <li class="menu3">
        <a href='#menu3'>Tab 3</a>
        <a class="back">Back 3</a>
    </li>
</ul>
<div id='menu1' class="section">
    <p>body class="menu1"</p>
</div>
<div id='menu2' class="section">
    <h1>body class="menu2"</h1>
</div>
<div id='menu3' class="section">
    <p>body class="menu3"</p>
</div>

CSS

* {padding:0; margin:0;}
html {
background:#3c3c3c 0 0 repeat;
padding:15px 15px 0;
font-family:sans-serif;
font-size:14px;
}
p, h3 { 
margin-bottom:15px;
}
div {
padding:10px;
width:600px;
background:#fff;
}
.menu li {
list-style:none;
display:inline;
}
.menu a {
padding:5px 10px;
display:inline-block;
background:#666;
color:#fff;
text-decoration:none;
}
.menu a.selected {
background:#fff;
color:#000;
}
a.back.selected{
    top:150px;
    display:block;
    color:red;
}
a.back{
    position:absolute;
    display:none;
}
.menu1 .back{left:0 }
.menu2 .back{left:80px }
.menu3 .back{left:180px}

JavaScript

var $items;
        $items = $('.menu a');
        $items.on('click', function ( e ) {
            var selected; 
            var $id; 
            e.preventDefault();
            $selected = $(this); 
              
            $("li").removeClass("flipped");
            
            $id = $($selected.attr('href'));
            $class = $selected.closest("li").attr('class');
            $selected.next("a.back").addClass('selected');

            $('body').removeClass();
            $('body').addClass($class);
            $('.sections').hide();
            
            $('#' + $selected.attr('href').split('#')[1]).stop().fadeIn();
            $('.tabs').show();


        });