JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<fieldset id="fieldset">

  <select name="" id="select" class="select">
    <option class="option" value="" disabled="">Selecione uma fonte</option>
    <option class="option" value="kumar">Kumar One</option>
    <option class="option" value="montserrat">Montserrat Subrayada</option>
    <option class="option" value="muli">Muli</option>
  </select>

  <input type="text" id="sample" value="" placeholder="Digite sue texto aqui">
  <div class="result">Resultado: <span id="result-text"></span></div>

</fieldset>

CSS

body {
  font-family: sans-serif
}

.result {
  font-size: 24px
}

.kumar {
  font-family: 'Kumar One', cursive;
}

.montserrat {
  font-family: 'Montserrat Subrayada', sans-serif;
}

.muli {
  font-family: 'Muli', sans-serif;
}


/* gujarati */

@font-face {
  font-family: 'Kumar One';
  font-style: normal;
  font-weight: 400;
  src: local('Kumar One'), local('KumarOne-Regular'), url(https://fonts.gstatic.com/s/kumarone/v1/8oW013wXvZiJ-_GqiY_ZKBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0964-0965, U+0A80-0AFF, U+200B-200D, U+20B9, U+25CC, U+A830-A839;
}


/* latin-ext */

@font-face {
  font-family: 'Kumar One';
  font-style: normal;
  font-weight: 400;
  src: local('Kumar One'), local('KumarOne-Regular'), url(https://fonts.gstatic.com/s/kumarone/v1/8jqYvh7KScH2NIUCDzr3VRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}


/* latin */

@font-face {
  font-family: 'Kumar One';
  font-style: normal;
  font-weight: 400;
  src: local('Kumar One'), local('KumarOne-Regular'), url(https://fonts.gstatic.com/s/kumarone/v1/XFPK9d0MeXRqUzVfNWK8DFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}


/* latin */

@font-face {
  font-family: 'Montserrat Subrayada';
  font-style: normal;
  font-weight: 400;
  src: local('MontserratSubrayada-Regular'), url(https://fonts.gstatic.com/s/montserratsubrayada/v4/nzoCWCz0e9c7Mr2Gl8bbgi4QO8UGDVVdK02gJrCWRzU.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}


/* vietnamese */

@font-face {
  font-family: 'Muli';
  font-style: normal;
  font-weight: 400;
  src: local('Muli Regular'), local('Muli-Regular'), url(https://fonts.gstatic.com/s/muli/v10/Ul00HI23GehQ9qPsH_7ocQ.woff2) format('woff2');
  unicode-range:...

JavaScript

$('#select').on('click', '.option', function() {
  var value = $(this).val();

  $('#result-text').attr('class', '');
  $('#result-text').addClass(value)
});

$('#sample').keyup(function() {
  var sample = $(this).val();
  $('#result-text').text(sample)
})