JSFiddle - React, Tailwind, and code Playground

by Pedro Marcano

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<label for="id_label_multiple">
  
  <select class="js-example-basic-multiple js-states form-control" id="id_label_multiple" multiple="multiple">
     
      <option value="AL">Alabama</option>
      <option value="WY">Wyoming</option>
      <option value="AL">Alabama</option>
      <option value="WY">Wyoming</option>
    
  </select>
</label>

CSS

*,
html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {
  background: url(https://www.w3schools.com/css/img_fjords.jpg)no-repeat;
  background-size: cover;
}

select {
  width: 100%;
}


.select2-container--default .select2-selection--multiple .select2-selection__choice{
  background:  -webkit-linear-gradient(-45deg, #e42693, #6e39a6);
  border-color: 1px solid transparent!important;
  color: #fff;
 
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #fff;
}

.select2-container--default .select2-selection--multiple{
      background-color: rgba(16, 5, 5, 0.47);
      border: 1px solid transparent;
      border-radius: 0px;
}
.select2-results__option {
  color: #fff;
  background: rgba(16, 5, 5, 0.47);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #e42693!important;
}

.select2-container--open .select2-dropdown--below {
  background: transparent;
}

.select2-container--default .select2-results__option[aria-selected=true]{
  background-color: #ac0665;
}

JavaScript

$(document).ready(function(){

$(".js-example-basic-multiple").select2({
	tags: true
});

});