JSFiddle - React, Tailwind, and code Playground

by cgough

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<select name="alt-theme" id="alt-theme">
 <option value="Default" selected="selected">Default</option>
 <option value="Dark">Dark</option>
 <option value="Material">Material</option>
</select>
<div class="default-form">Stuff</div>

CSS

.Default
{
    background-color: #fff;
}
                                                                   
.Material
{
    background-color: #006dcc;
}

.Dark
{
    background-color: #000;
}

JavaScript

var selectedTheme = 'default-form';

$('#alt-theme').change(function(){
$('div').removeClass(selectedTheme).addClass($(this).val());
    selectedTheme = $(this).val();
});

var elements  = {
theme_select: undefined
}

function themeSelect (){
var theme_select =elements.theme_select = $("<select name='alt-theme' id='alt-theme'>")
                        .append(new Option('Default', 'Default', true, true),
                        new Option('Dark', 'Dark', false, true),
                        new Option('Material', 'Material', false, false));
}