JSFiddle - React, Tailwind, and code Playground

by Blender

HTML

<ul class="nav">
        <li><a class="link1" href="#">itemA</a></li>
        <li><a class="link2" href="#">itemB</a></li>
        <li><a href="#">itemC</a></li>
        <li><a href="#">itemD</a></li>
</ul>
         <div class ="contentcont">
</div>

CSS

.nav > li a{
    display: block;
    overflow:hidden;
    text-decoration:none;
    font-size:20px;
    margin: 0px 20px;
        float: left;
        background-color:#E55451;
        font-family: Arial, "MS Trebuchet", sans-serif;
        padding: 10px 20px;
}
.contentcont{
    float:left;
}

.styled {
    font-size: 30px;
    color: red;
}

JavaScript

$(document).ready(function() {
    $('.link1').click(function(e) {
        $('<h1 />', {
            text: 'Text appear',
            class: 'styled'
        }).appendTo('.contentcont');

        e.preventDefault();
    });


    $('.link2').click(function(e) {
        $('<h1 />', {
            text: 'another',
            class: 'styled'
        }).appendTo('.contentcont');

        e.preventDefault();
    });


});