JSFiddle - React, Tailwind, and code Playground

HTML

<head>
  <title>BMI Calculator</title>
  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
</head>
<body>
<form>
    <p><strong>Height:</strong></p>
    <div id="heightslider" class="slider"></div>
    <div id="heightslidecm">100cm</div>
    <div id="heightslidein">39in</div>
    <input type="text" id="input_height" style="display: none;" />
    <hr />
    <p><strong>Weight:</strong></p>
    <div id="weightslider" class="slider"></div>
    <div id="weightslidekg">0kg</div>
    <div id="weightslidelb">0lb</div>
    <input type="text" id="input_weight" style="display: none;" />
    <input type="button" id="calculatebutton" value="Calculate" />
    <input type="text" id="result" disabled="disabled" />
  </form>
</body>

JavaScript

$(document).ready(function(){
      $( "#weightslider" ).slider({
        animate: true,
        range: "min",
        min: 0,
        max: 200,
        step: 1,
        slide: function( event, ui ) {
          $( "#weightslidekg" ).html( ui.value + 'kg' );
          $( "#weightslidelb" ).html( (ui.value*2.20462).toFixed(0) + 'lb' );
        },
        change: function(event, ui) {
          $('#input_weight').attr('value', ui.value);
        }
      });
      $( "#heightslider" ).slider({
        animate: true,
        range: "min",
        min: 100,
        max: 250,
        step: 1,
        slide: function( event, ui ) {
          $( "#heightslidecm" ).html( ui.value + 'cm' );
          $( "#heightslidein" ).html( (ui.value*0.393700787).toFixed(0) + 'in' );
        },
        change: function(event, ui) {
          $('#input_height').attr('value', (ui.value/100));
        }
      });
      $("#calculatebutton").click(function(){
        var weight = $("#input_weight").val(),
            height = $("#input_height").val(),
            heightsqaured = (height)*(height),
            result = (weight)/(heightsqaured);
        if (result < 16) {
          var rating = ("You are severely underweight");
        } else if (result > 16 && result < 18.5) {
          var rating = ("You are underweight");
        } else if (result > 18.5 && result < 25){
          var rating = ("You are healthy");
        } else if (result > 25 && result < 30){
          var rating = ("You are overweight");
        } else if (result > 30 && result < 35){
          var rating = ("You are moderately obese");
        } else if (result > 35 && result < 40){
          var rating = ("You are severely obese");
        } else if (result > 40 && result < 80){
          var rating = ("You are very severely obese");
        } else if (result > 80){
          var rating = ("This result seems unlikely, please check that the information you have entered is correct");
        }
       ...