JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabwrap">
         
    <!-- TABS -->   
    <ul id="tabs">
        <li class="current"><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
 
    <!-- TAB CONTENT -->
    <div id="content">
        <div id="home" class="current">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit ipsam delectus adipisci culpa praesentium libero beatae maiores explicabo perspiciatis ad. Excepturi sapiente debitis odit quibusdam ullam rerum reprehenderit! Ratione similique.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit ipsam delectus adipisci culpa praesentium libero beatae maiores explicabo perspiciatis ad. Excepturi sapiente debitis odit quibusdam ullam rerum reprehenderit! Ratione similique.</p>
        </div>
        <div id="about">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam dolores maxime qui molestias id dignissimos incidunt sit rerum. Expedita voluptas provident dolorum dolore non impedit minima eaque consequatur velit neque!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit ipsam delectus adipisci culpa praesentium libero beatae maiores explicabo perspiciatis ad. Excepturi sapiente debitis odit quibusdam ullam rerum reprehenderit! Ratione similique.</p>
        </div>
        <div id="services">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus quisquam blanditiis recusandae nulla consectetur consequuntur itaque odio vero architecto quod dolore magni inventore reprehenderit quos cum. Non assumenda aspernatur modi!</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit ipsam delectus adipisci culpa praesentium libero beatae maiores explicabo perspiciatis ad. Excepturi sapiente debitis odit quibusdam ullam rerum reprehenderit! Ratione...

CSS

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0;margin: 0;
 }
body { max-width:600px; margin: 0 auto;}
#tabwrap { 
    background: #fff; 
    overflow: hidden; 
    width: 100%;
    min-height: 300px;
    margin: 60px auto;
    box-shadow: 0 0 20px #ddd;
    border: 1px solid #ddd;
}
#tabs { overflow: hidden; background: #777; }
#tabs li { list-style: none; }
#tabs li a { 
    float: left; 
    display: block;
    padding: 10px;
    color: #fff;
    width: 25%;
    text-decoration: none;
    text-align: center;
    border-right: 1px solid #555;
    border-left: 1px solid #888;
    font-size: 15px;
    text-shadow: 1px 1px 0 #000;
}
 
#tabs li a:hover { background: #666; }
#tabs li:first-child a { border-left: 0; }
#tabs li:last-child a { border-right: 0; }
 
#tabs li.current a { 
    background: #fff; 
    color: #666; 
    text-shadow: 1px 1px 0 #fff;
}
 
#content > div {
    clear: both;
    padding: 20px;
    line-height: 19px;
    color: #666;
    text-shadow: 1px 1px 0 #fff;
    display: none;
}
 
#content .current { display: block; }
#content #home.first { display: block; }
#content p { margin: 0 0 20px 0;}

JavaScript

$('#tabs li a').click(function(e){
 
    $('#tabs li, #content .current').removeClass('current').removeClass('fadeInLeft');
    $(this).parent().addClass('current');
    var currentTab = $(this).attr('href');
    $(currentTab).addClass('current fadeInLeft');
    e.preventDefault();
 
});