JSFiddle - React, Tailwind, and code Playground

by Raúl Rojas

HTML

<input id="SmlInput" type="text" name="BusBlindInputSml" class="form-control BusBlindInputSml" value="Extra Text">
<div class="radio">
  <label>
        <input type="radio" name="SelectColour" value="WhiteText">White</label>
</div>
<!-- radio-->
<div class="radio">
  <label>
        <input type="radio" name="SelectColour" value="WhiteText2">Antique White</label>
</div>
<!-- radio-->
<div class="radio">
  <label>
        <input type="radio" name="SelectColour" value="RedText" checked>Cherry Red</label>
</div>
<!-- radio-->

CSS

#SmlInput {
  background: #000;
}

#SmlInput.RedText {
  color: red;
}

#SmlInput.WhiteText {
  color: #fff;
}

#SmlInput.WhiteText2 {
  color: #eee;
}

JavaScript

$(document).ready(function() {

	  $('input:radio').click(function() {

	    $('#SmlInput').attr('class', this.value);

	  });

	});