JSFiddle - React, Tailwind, and code Playground

by Alexandru Mihai

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/css/select2.min.css">
<div class="styleselect">
     <select data-placeholder="Select a Category" name="cat" id="cat" class="select2"  multiple >
        <option selected value="all">All Categories</option>
        <option value="EN">England</option>
        <option value="GR">Greece</option>
        <option value="US">USA</option>
        <option value="IT">Italy</option>
     </select>
 </div>

CSS

select{
   appearance:none; -moz-appearance:none; -webkit-appearance: none; 
    }

.styleselect {

    margin-right: 2%;

    margin-left: 2%;
    background-image: url("http://s21.postimg.org/nx05vn15f/dropdown_style.png");
    background-position: 117px center;
    background-repeat: no-repeat;
    overflow: hidden;
    vertical-align: middle;
    width: 140 px;
    float:left;
    padding: 0;
    margin: 0;
    display: inline-block;
}
.styleselect select {
    background-color: transparent;
    margin: 0 0 1px;
    color: #ffffff;
    padding: 4px;
    float:left;
    vertical-align: middle;
    width: 140 px;
}
.styleselect select option{
    background-color: #DFD3C3;            
    overflow: hidden;
    vertical-align: middle;
    width: 140 px;
    padding: 0;
    margin: 0;
    float:left;
    display: inline-block;
}

JavaScript

$("#cat").select2();