JSFiddle - React, Tailwind, and code Playground

by thecodeparadox

HTML

<div id="facebook-info">
    <div id="facebook-button">
        click me!
    </div>
</div>

<div id="service-sets">
</div>

CSS

.tag {
display: inline-block;
padding: 0 15px 15px 0;
}

.blue-tag {
display: inline;
float: left;
padding: 0 5px 0 10px;
color: white;
height: 27px;
line-height: 27px;
font-size: 12px;
font-weight: bold;
text-shadow: 0 1px 0 RGBA(0,0,0,0.2);
border: solid 1px #0a6594;
background: #009AE7;
background: -moz-linear-gradient(top, #009AE7 0%, #3bbcff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#009AE7), color-stop(100%,#3bbcff));
webkit-box-shadow: 2px 1px 4px RGBA(0,0,0,0.1),inset 0 1px 0 RGBA(255,255,255,0.6);
-moz-box-shadow: 2px 1px 4px RGBA(0,0,0,0.1),inset 0 1px 0 RGBA(255,255,255,0.6);
-o-box-shadow: 2px 1px 4px RGBA(0,0,0,0.1),inset 0 1px 0 RGBA(255,255,255,0.6);
box-shadow: 2px 1px 4px RGBA(0,0,0,0.1),inset 0 1px 0 RGBA(255,255,255,0.6);
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
text-transform: capitalize;
white-space: nowrap;
cursor: default;
}

.delete-tag {
display: inline;
}

.icon-cancel-circle-1 {
display: inline;
content: "î †";
font-size: 17px;
line-height: 24px;
cursor: pointer;
float: right;
color: #1b7eb1;
margin-top: 1px;
float: right;
padding-left: 5px;
}

.icon-cancel-circle-1:hover {
color: white;
}

JavaScript

var a=0;
$(function(){
    $("#facebook-info").on('click', '#facebook-button', function() {
    a = a+1;
    $("#service-sets").prepend('<div class="tag" id="facebook-tag-'+a+'"><span class="blue-tag">Facebook<span class="delete-tag"><i class="icon-cancel-circle-1" id="facebook-del-'+a+'">X</i></span></span></div>');
});
    $("#service-sets").on('click', "[id^=facebook-del]", function() {           
        $(this).closest('div.tag').remove();
});
})