JSFiddle - React, Tailwind, and code Playground

by wesley_murch

HTML

<button class="add">Add cell</button>
<button class="remove">Remove cell</button>


<ul id="nav">
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
</ul>

CSS

#nav {
     width:500px;
 background:teal;   
}
ul{display:table;width:100%}
li{text-align:center;display:table-cell}
a{display:block}
a:hover{background:red}

JavaScript

$('button.add').click(function(){
    $('li:first').clone().appendTo('ul');  
});
$('button.remove').click(function(){
    $('li:first').remove();  
});