JSFiddle - React, Tailwind, and code Playground

by Lucille Kenney

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/redmond/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div class="ui-splitselect ui-helper-clearfix ui-widget ui-widget-content">
    <div class="ui-widget-content list-available" style="width: 200px;">
        <ul class="list available" style=" ">
            <li class="ui-state-default">
                <div class='handle-drag ui-widget-header'><span class='ui-icon ui-icon-carat-2-n-s'></span>
                </div> <span class="handle-select">Espania</span>
 <a class="handle-move ui-widget-header" href="#"><span class="ui-icon ui-icon-plus"></span></a>

            </li>
            <li class="ui-state-default">
                <div class='handle-drag ui-widget-header'><span class='ui-icon ui-icon-carat-2-n-s'></span>
                </div> <span class="handle-select">Espania</span>
 <a class="handle-move ui-widget-header" href="#"><span class="ui-icon ui-icon-plus"></span></a>

            </li>
            <li class="ui-state-default">
                <div class='handle-drag ui-widget-header'><span class='ui-icon ui-icon-carat-2-n-s'></span>
                </div> <span class="handle-select">Espania</span>
 <a class="handle-move ui-widget-header" href="#"><span class="ui-icon ui-icon-plus"></span></a>

            </li>
        </ul>
    </div>
</div>

CSS

/* splitselect
----------------------------------*/
 .ui-splitselect {
    font-size: 0.8em;
}
.ui-splitselect ul {
    -moz-user-select: none;
}
.ui-splitselect div.list-selected {
    padding: 0;
    margin: 0;
    float:left;
    border : none;
}
.ui-splitselect div.list-available {
    padding: 0;
    margin: 0;
    float:left;
    border-top: none;
    border-bottom: none;
    border-right: none;
}
.ui-splitselect ul.list {
    position: relative;
    padding: 0;
    overflow: auto;
    overflow-x: hidden;
    margin: 0;
    list-style: none;
    width: 100%;
}
.ui-splitselect li {
    margin: 0;
    padding: 0;
    cursor: default;
    line-height: 20px;
    height: 20px;
    font-size: 11px;
    list-style: none;
    display: list-item;
    white-space: nowrap;
    overflow: hidden;
    margin:1px;
}
 
.ui-splitselect li .handle-select{
    float:left;
}
.ui-splitselect li .handle-drag {
    float: left;
    padding: 2px 5px 2px 5px;
    height: 20px;
    margin:0px 10px 0px 5px;
    border-top:0;
    border-bottom:0;
}
.ui-splitselect li .handle-move {
    text-decoration: none;
    cursor: pointer;
    float: right;
    padding: 2px 5px 2px 5px;
    height: 20px;
    margin:0px 5px 0px 10px;
    border-top:0;
    border-bottom:0;
}

.ui-splitselect li.ui-state-focus .handle-drag,
.ui-splitselect li.ui-state-focus .handle-move
 {
    border:inherit;
    border-top:0;
    border-bottom:0;
}
.ui-splitselect .ui-widget-header {
    border: none;
    font-size: 11px;
}
.ui-splitselect .add-all {
    float: right;
    padding: 7px;
    white-space: nowrap;
}
.ui-splitselect .remove-all {
    float: right;
    padding: 7px;
    white-space: nowrap;
}
.ui-splitselect .count {
    cursor: default;
    float: left;
    padding: 7px;
}
.ui-splitselect .search {
    float: left;
    padding: 1px;
    opacity: 0.7;
    margin: 4px;
    height: 14px;
}
.ui-splitselect .busy {
    left: 0px;
    float: left;
    padding: 7px 7px 7px 25px;
    z-index: 1;
   ...

JavaScript

$("li").click(function () {
     $(this).toggleClass('ui-state-focus');

 });