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">
    <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">
    <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><br>

<p>
<span class="_21">■<span class="zero"> </span></span>
<span class="_106">■<span class="zero"> </span></span>
</p>

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: red}

.verb,.noun {
  text-shadow: none;
  display: inline;
  transition: text-shadow 0.1s linear;
  }

.verb-hovered {
  text-shadow: 0 0 3px blue;
  }

.noun-hovered {
  text-shadow: 0 0 3px red;
  }

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');
    	});
    
    
    $("#verb").mouseenter(function(){
        $(".verb").addClass("verb-hovered");
    });
    $("#verb").mouseleave(function(){
        $(".verb").removeClass("verb-hovered");
    });
  
    $("#noun").mouseenter(function(){
        $(".noun").addClass("noun-hovered");
    });
    $("#noun").mouseleave(function(){
        $(".noun").removeClass("noun-hovered");
    });
      
});