JSFiddle - React, Tailwind, and code Playground

by magizter

HTML

<select name="color_scheme" id="color_scheme">
  <option selected="selected">Default</option>
  <option value="66.4%">Black</option>
  <option value="62.4%">Blue</option>
  <option value="50%">Brown</option>
  <option value="52%">Green</option>
  <option value="53%">Gray</option>
  <option value="54%">Lime</option>
  <option value="55%">Orange</option>
</select>
<div id="fontsizevisual" class="Default">Some text here</div>

CSS

.Default
{
    background-color:white
}
.Black
{
    background-color:black;
    color:white
}
.Blue
{
    background-color:Cyan;
    font-size:22px;
}
.Brown {
     background-color:brown;
 }
.Green
 {
     background-color:green;
 }

.Gray
 {
     background-color:gray;
 }

.Lime
  {
      background-color:lime;
  }

.Orange
  {
      background-color:orange;
  }

JavaScript

var selectedScheme = 'Default';

$('#color_scheme').change(function(){
$('#fontsizevisual').removeClass(selectedScheme).addClass($(this).val());
    selectedScheme = $(this).val();
});