JSFiddle - React, Tailwind, and code Playground

by Vasil Svetoslavov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-select.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="content">
  <div class="panel">
    <div class="panel-body">
      <select id="colorpicker" class="selectpicker">
        <option data-content="<span class='text-capitalize'><span class='badge blue'><i class='fa fa-user'></i></span> blue</span>" value="blue">Blue</option>
        <option data-content="<span class='text-capitalize'><span class='badge green'><i class='fa fa-user'></i></span> green</span>" value="green">Green</option>
        <option data-content="<span class='text-capitalize'><span class='badge red'><i class='fa fa-user'></i></span> red</span>" value="red">Red</option>
        <option data-content="<span class='text-capitalize'><span class='badge mahogany'><i class='fa fa-user'></i></span> mahogany</span>" value="mahogany">Mahogany</option>
        <option data-content="<span class='text-capitalize'><span class='badge purple'><i class='fa fa-user'></i></span> purple</span>" value="purple">Purple</option>
        <option data-content="<span class='text-capitalize'><span class='badge navy'><i class='fa fa-user'></i></span> navy</span>" value="navy">Navy</option>
      </select>
      <div id="color" class="label blue">
        TEST
      </div>
    </div>
  </div>
</div>

CSS

.blue {
  background: linear-gradient(to bottom, #1e5799 0%,#2989d8 83%,#207cca 100%,#7db9e8 100%);
}
.green {
  background: linear-gradient(to bottom, #1a3114 0%,#21803f 83%,#3a5c29 100%,#2d475c 100%);
}
.red {
  background: linear-gradient(to bottom, #311414 0%,#911c1c 83%,#6a1515 100%,#2d475c 100%);
}
.mahogany {
  background: linear-gradient(to bottom, #603621 0%,#d77012 83%,#bd7719 100%,#2d475c 100%);
}
.purple {
  background: linear-gradient(to bottom, #213760 0%,#3b077b 83%,#342257 100%,#2d475c 100%);
}
.navy {
  background: linear-gradient(to bottom, #294a71 0%,#000 83%,#2d597e 100%,#2d475c 100%);
}



.rectangle {
  display: inline-block;
  padding-top: 1px;
}
.rectangle #color {
  margin-top: 2px;
  display: block;
  width: 30px;
  height: 23px;
  border: 1px solid gray;
}

JavaScript

$('#colorpicker').change(function() {
	var sel = $('#colorpicker').val();
  $('#color').get(0).className = 'label ' + sel;
});