JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<select id="font_size">
    <option value="select">Select Font Size</option>
    <option value="h1">H1</option>
    <option value="h2">H2</option>
</select>
<select id="text_align">
    <option value="lft_textalign">Left</option>
    <option value="cnt_textalign">Center</option>
    <option value="rgt_textalign">Right</option>
</select>
<div >
    <span id="Title"class="text-capitalize">check</span>
</div>

CSS

.h1{
	font-size: 32px;
}
.h2{
	font-size: 24px;
}
.rgt_textalign{
	text-align: right;
}
.lft_textalign{
	text-align: left;
}
.cnt_textalign{
	text-align: center;
}

JavaScript

window.onload = function() {
    var font_size = document.querySelector('#font_size');

	// Bind onchange event
	font_size.onchange = function() {
	 document.querySelector("#Title").className = this.options[this.selectedIndex].value += " text-capitalize";	 
	};

	var text_align = document.querySelector('#text_align');

	// Bind onchange event
	text_align.onchange = function() {
	 document.querySelector("#Title").className = this.options[this.selectedIndex].value;	 
	};
};