JSFiddle - React, Tailwind, and code Playground

by liquidmetalrob

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<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/bootstrap-select/1.12.2/css/bootstrap-select.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>
<div class="selectContainer">

  <select class="form-control pickerSelectClass" value="(201, 26, 9)" id="1">
    <option class="big _21" value="_21">■ Bright Red</option>
    <option class="big _106" value="_106">■ Bright Orange</option>
    <option class="big _24" value="_24">■ Bright Yellow</option>
  </select>

  <select class="form-control pickerSelectClass" value="(255, 163, 0)" id="2">
    <option class="big _21" value="_21">■ Bright Red</option>
    <option class="big _106" value="_106" selected>■ Bright Orange</option>
    <option class="big _24" value="_24">■ Bright Yellow</option>
  </select>
  
</div><br>

<p><span id="verb">Verbs</span> &nbsp; -  &nbsp; <span id ="noun">Nouns</span></p>

I      <span class="verb">like</span> 
to     <span class="verb">ride</span> 
my     <span class="noun">bicycle</span> 
every  <span class="noun">day</span>.
<br>

<p style="font-size: 28px">
<span class="_21" id="(201, 26, 9)">■<span class="zero"> </span></span>
<span class="_106" id="(255, 163, 0)">■<span class="zero"> </span></span>
</p>

<h1 class="_21" value="(201, 26, 9)">
  Red
</h1>

CSS

.selectContainer {width:200px}

.big {
  font-size: 16px;
  font-weight: bold !important;
  text-shadow: -1px -1px 0 #444, 1px -1px 0 #444, 
               -1px 1px 0 #444, 1px 1px 0 #444;
  }
  
._21 {color: red !important}
  
._106 {color: orange !important}

._24 {color: yellow !important}

/*glowing effect*/

#verb {color: blue}
#noun {color: blue}

.hovered {
  transition: text-shadow 0.1s linear;
  text-shadow: 0 0 3px blue;
  }

JavaScript

$(document).ready(function() {  
      $(".pickerSelectClass").selectpicker();   

      $('select').each(function(index, item){
      			$(this).parent().find('.filter-option').addClass("big");
            $(this).parent().find('.filter-option').addClass($(this).val());
            
            
      }).on('change', function(){
            $(this).parent().find('.filter-option').removeClass(function(index, className) {
            	return (className.match(/_\d*/g) || []).join(' ');
            });
            $(this).parent().find('.filter-option').addClass($(this).val());
            $('[title]').removeAttr('title');
      });
      
      $(document).ready(function() {
    		$('[title]').removeAttr('title');
    	});
      
});