JSFiddle - React, Tailwind, and code Playground
HTML
<div id="service-box">
<div id="click">
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;
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;
}
#click {
cursor: pointer;
}
JavaScript
$(function() {
$("#service-sets") function() {
$("#facebook-tag").remove();
});
})