JSFiddle - React, Tailwind, and code Playground

by anurag

HTML

<div class="container">
    
    <input type="button" class="append" value="Append">
    
    <div class="box">
        <div class="text"><span>ABCDEFG</span></div>
        <a href="#" class="test">x</a>
    </div>
    
</div>

CSS

.box {
    padding:3px;
    margin-bottom:3px;
    border-bottom:2px solid #fff;
    width:550px;
}
.box:hover{background-color:#fff;}

#container {
    position:relative;
}

.text {
    float:left;
    width:300px;
    font-size:13px;
}
.text span {
    font-size:18px;
    line-height:23px;
    font-weight:700;
}

JavaScript

$(function() {
    $(".append").click(function() {
        $('.container').append('<div class="box"></div>');
        $('.box:last').append('<div class="text"><span>ABCDEFG</span><br/></div>');
        $('.box:last').append('<a href="#" class="test">x</a>');
    });

    $("a.test").live('click', function() {
        alert("works great");
    });
});