JSFiddle - React, Tailwind, and code Playground

by Rajaprabhu Aravindasamy

HTML

<div class="trail"></div>
<ul class="navigation">
    <li><a class="orange" href="#">Link1</a>
    </li>
    <li><a class="black" href="#">Link2</a>
    </li>
    <li><a class="green" href="#">Link3</a>
    </li>
</ul>

CSS

.trail {
    background-color:#ccc;
    padding:20px;
    margin-bottom:10px;
}
.trail > a {
    color:#ffffff;
}
.navigation {
    padding:20px;
    margin:0;
    background-color:#ccc;
    list-style:none;
}
.navigation > li > a {
    color:#ffffff;
} 
.orange {
    background-color:orange;
}
.black {
    background-color:black;
}
.green {
    background-color:green;
}

JavaScript

var count = 0;

$('.navigation > li > a').on('click', function (e) {
    e.preventDefault();

        var $addinput = $(this).clone();
        $(".trail").html($addinput);
   
});