JSFiddle - React, Tailwind, and code Playground

by Jonatas Piazzi

HTML

<div class="content">
    <span class="added">A text just a little large 1.</span>
    <span class="added">A text just a little large 2.</span>
    <span class="added">A text just a little large 3.</span>
    <span class="added">A text just a little large 4.</span>
    <span class="added">A text just a little large 5.</span>
    <span class="adder">Add</span> 
</div>

CSS

.content {
    width: 50%;
    margin: 10px;
    padding: 10px;
    border: 1px solid black;
}

.adder {
    color: blue;
    cursor: pointer;
}

.added {
    position: relative;
    white-space: nowrap;
}

JavaScript

$(function() {
    $(".adder").click(function() {
        $(document.createElement("span"))
            .addClass("added")
            .html("A custom text to be add,")
            .insertBefore(this);
    });
});