JSFiddle - React, Tailwind, and code Playground

by rjasoriano

HTML

<h1 class="headings">FONT SIZE</h1>
<select id="click">
  <option value="40" id="forty">40pt</option>
  <option value="60" id="sixty">60pt</option>
  <option value="80" id="eighty">80pt</option>
  <option value="100" id="hundred">100pt</option>
</select>
<br>
<h1 class="headings">FONT STYLE</h1>
<select id="click2">
  <option value="Font1" id="Font1">Carter One</option>
  <option value="Font2" id="Font2">Fredericka The Great</option>
  <option value="Font3" id="Font3">Faster One</option>
</select>
<br>
<br>
<div id="solo">
  <p class="text">Apple Mango</p>
</div>

CSS

@font-face{
  font-family: Font1;
  src: url(https://fonts.gstatic.com/s/carterone/v10/q5uCsoe5IOB2-pXv9UcNExN8hA.woff2) format('woff2');
}
@font-face{
  font-family: Font2; 
  src: url(https://fonts.gstatic.com/s/frederickathegreat/v7/9Bt33CxNwt7aOctW2xjbCstzwVKsIBVV--Sjxbc.woff2) format('woff2');
}
@font-face{
  font-family: Font3;
  src: url(https://fonts.gstatic.com/s/fasterone/v10/H4ciBXCHmdfClFb-vWhf-LyYhw.woff2) format('woff2');
}
#solo{
  border-style: solid;
  border-left-width: 2px;
  margin: 5px;
}
.text{
  text-align: center;
}
#click2{
   margin-left: auto;
   margin-right: auto;
   display: block;
   font-size: 30px;
}
#click{
   margin-left: auto;
   margin-right: auto;
   display: block;
   font-size: 30px;
}
.headings{
  font-family: Font1;
  text-align: center;
  font-size: 10pt; 
}
#Font1{
  font-family: Font1;
}
#Font2{
  font-family: Font2;
}
#Font3{
  font-family: Font3;
}
#forty{
  font-size: 40pt;
}
#sixty{
  font-size: 60pt;
}
#eighty{
  font-size: 80pt;
}
#hundred{
  font-size: 100pt;
}

JavaScript

$("#click").change(function() {
    $('.text').css("font-size", $(this).val() + "px");
});

$("#click2").change(function() {
    $('.text').css("font-family", $(this).val());
});