JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="as-selections">
<li class="as-selection-item"><a class="as-close">×</a>Johnny Storm</li>
<li class="as-selection-item"><a class="as-close">×</a>Johnny Storm</li>
<li class="as-selection-item"><a class="as-close">×</a>Jagger</li>
<li class="as-selection-item"><a class="as-close">×</a>Hallo</li>
</ul>
CSS
ul.as-selections {
list-style-type: none;
padding: 4px 0 4px 4px;
margin: 0;
}
ul.as-selections.loading {
background-color: #eee;
}
ul.as-selections li {
float: left;
margin: 1px 4px 1px 0;
}
ul.as-selections li.as-selection-item {
color: #2b3840;
text-shadow: 0 1px 1px #fff;
background-color: #ddeefe;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ddeefe), to(#bfe0f1));
border: 1px solid #acc3ec;
border-top-color: #c0d9e9;
padding: 2px 7px 2px 10px;
border-radius: 12px;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
box-shadow: 0 1px 1px #e4edf2;
-webkit-box-shadow: 0 1px 1px #e4edf2;
-moz-box-shadow: 0 1px 1px #e4edf2;
}
ul.as-selections li.as-selection-item a.as-close {
float: right;
margin: 1px 0 0 7px;
padding: 0 2px;
cursor: pointer;
color: #5491be;
font-family:"Helvetica", helvetica, arial, sans-serif;
font-size: 14px;
font-weight: bold;
text-shadow: 0 1px 1px #fff;
-webkit-transition: color .1s ease-in;
}
ul.as-selections li.as-selection-item.blur {
color: #666666;
background-color: #f4f4f4;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f4f4f4), to(#d5d5d5));
border-color: #bbb;
border-top-color: #ccc;
box-shadow: 0 1px 1px #e9e9e9;
-webkit-box-shadow: 0 1px 1px #e9e9e9;
-moz-box-shadow: 0 1px 1px #e9e9e9;
}
ul.as-selections li.as-selection-item.blur a.as-close {
color: #999;
}
ul.as-selections li:hover.as-selection-item {
color: #2b3840;
background-color: #bbd4f1;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#bbd4f1), to(#a3c2e5));
border-color: #6da0e0;
border-top-color: #8bb7ed;
}
ul.as-selections li:hover.as-selection-item a.as-close {
color: #4d70b0;
}
ul.as-selections li.as-selection-item.selected {
border-color: #1f30e4;
}
ul.as-selections li.as-selection-item a:hover.as-close {
color:...
JavaScript
$(function() {
$('.as-close').click(function(e) {
e.preventDefault();
$(this).parent().remove();
});
});