JSFiddle - React, Tailwind, and code Playground

HTML

<header>

            <nav class="food-nav">
            <ul id="links"> 
            <li><a href="#starters" title="Starters">Starters</a></li>
            <li><a href="#sandwiches" title="Sandwiches">Sandwiches</a></li>
            <li><a href="#mains" title="Mains">Mains</a></li>
            <li><a href="#desserts-drinks" title="Desserts &amp; Hot Drinks">Desserts &amp; Hot Drinks</a></li>
            <li><a href="#xmas" title="Christmas Menu">Christmas Menu</a></li>
            </ul>
            </nav>
        </header>

    <article  class="body-content fl" id="wrapper">
              
        <article id="starters" class="descriptions">
            <h2>Starters</h2>
            <ul>
                <li>dsdsdfrsdfsdfdsfsdfd</li>
            </ul>
        
        </article>
        
        <article id="sandwiches" class="descriptions">
            <h2>Sandwiches</h2>
            <p>Served on a choice of fresh breads with baby salad, homemade coleslaw and homemade crisps</p>
            <ul>
                <li>dasdasdasdasdasdsadas</li>
            </ul>
            <figure>
                <img src="" alt="" height="" width="" />
                <figcaption></figcaption>
            </figure>
        </article>
        
        <article id="mains" class="descriptions">
            <h2>Mains</h2>
            <ul>
                <li>dsaddasdasdasdsa</li>
            </ul>
          
        </article>
        
        <article id="desserts" class="descriptions">
            <h2>Desserts</h2>
            <p>All desserts are priced at &pound;4.50</p>
            <ul>
                <li>dsadsadasdsadasdasd</li>
            </ul>
          
        </article>
        
        <article id="drinks" class="descriptions">
            <h2>Hot Drinks</h2>
            <ul>
                <li>dsdadasdsadasd</li>
            </ul>
        </article>
        
        <article id="xmas" class="descriptions">
            <h2>Christmas Menu</h2>
            <ul>
         ...

CSS

.descriptions{position:absolute; top:250px; display:none;}


.food-nav{width:272px;}
.food-nav ul{display:block;}
.food-nav ul li{display:block;float:left;background:#998982; margin:0 0 2px 0;}

.food-nav ul li a:link,.food-nav ul li a:visited{float:left;width:267px;color:#fff;padding:12px 0 12px 5px;
    -webkit-transition: background-color 0.2s linear;  
    -moz-transition:     background-color 0.2s linear;  
    -o-transition:         background-color 0.2s linear;  
}
.food-nav ul li a.active, .food-nav ul li a:hover{background-color: #C3B2AB;color:;}

JavaScript

$("ul#links li a").unbind().bind('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    $('.descriptions').hide();
    $($(this).attr('href')).toggle(500);
    /*$(this).toggleClass('active');
    $(".descriptions").fadeOut();
    var index = $(this).index();;
    $(".descriptions").eq(index).fadeIn();

    $('.active').removeClass('active');
    $(this).addClass('active');

}, function(e) {
    $(".descriptions").stop().fadeOut();
    */
});