JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<div class="myDropdown" style="width: 296px;"><a><div class="mySelect myMultiple"><span class="myValue" style="display: none;"></span><div class="myArrow myArrowDown"></div><ul class="mySelection"><li data-val="CL">Chile<span class="myDeselect"></span></li><li data-val="CN">China<span class="myDeselect"></span></li><li data-val="CX">Christmas Island<span class="myDeselect"></span></li><li data-val="CC">Cocos (Keeling) Islands<span class="myDeselect"></span></li><li data-val="CG">Congo<span class="myDeselect"></span></li><li data-val="CO">Colombia<span class="myDeselect"></span></li></ul></div></a><div class="myResult"><div class="mySearch"><span class="myIcon"></span></div></div>

CSS

div.myDropdown {
	position: relative;
	display: inline-block;
	font-size: 13px;
	zoom: 1;
	*display: inline;
	-webkit-user-select: none;
	   -moz-user-select: none;
		    user-select: none;
}
div.myDropdown * {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
		    box-sizing: border-box;		
}
div.myDropdown  div.mySelect {
	width: 100%;
	height: 24px;
	border: 1px solid #4195fc;
	border-radius: 6px;
	box-shadow: 0px 0px 4px #4195fc; 
	padding-top: 2px;
	padding-bottom: 2px;
	height: 100% !important;
}


div.myDropdown>a div.myArrow {
	position: absolute;
	top: 2px;
	right: 0;
	display: block;
	width: 18px;
	height: 100%;
}
div.myDropdown>a div.myArrow.myArrowDown::before {
    font-family: FontAwesome;
    content: "\f078";
    font-size: 17px;
	color: #999;
}
div.myDropdown  ul.mySelection {
	display: inline;
	list-style-type: none;
	padding: 0;
	margin-left: 5px;
}
div.myDropdown  div.mySelect ul.mySelection>li {
	display: inline-block;
	border: 1px solid #4195fc;
	margin: 2px;
	border-radius: 3px;
	padding-left: 2px;
	padding-right: 2px;
}
div.myDropdown  div.mySelect ul.mySelection>li>span.myDeselect::before {
	font-family: FontAwesome;
    content: "\f00d";
    font-size: 10px;
	padding-left: 2px;
	padding-right: 2px;
}