JSFiddle - React, Tailwind, and code Playground

HTML

<script language="JavaScript" type="text/javascript">
    function vucutKitleIndex() {
        var kilo = $('#vucut-kitle-indeks_kg').val()
        var boy =  $('#vucut-kitle-indeks_cm').val();

        if (kilo > 0 && boy > 0) {
            var sonuc = kilo / (boy / 100 * boy / 100)
            $('#vucut-kitle-indeks_endeks').text(sonuc);
            if (sonuc < 18.5) {
                $('#vucut-kitle-indeks_sonuc').text("{{__('Zayıfsınız.')}}");
            }
            if (sonuc > 18.5 && sonuc < 25) {
                $('#vucut-kitle-indeks_sonuc').text("{{__('Gayet Sağlıklısınız.')}}");
            }
            if (sonuc > 25) {
                $('#vucut-kitle-indeks_sonuc').text("{{__('Kilolusunuz.')}}");
            }
        }
        else {
            $('#vucut-kitle-indeks_sonuc').text("{{__('Girdiğiniz değerlerde yanlışlık var.')}}");
        }
                    alert(kilo);
                        alert(boy);
        $('#vucut-kitle-indeks_result').show();
    }
    
</script>
<div id="vucut-kitle-indeks-form">
	<div class="row">
		<div class="col-md-6">
			<div class="form-group">
			  	<label for="vucut-kitle-indeks_kg">{{__('Kilo(kg)')}}:</label>
			  	<input type="number"  name="kilo" size="10" class="form-control" id="vucut-kitle-indeks_kg">
			</div>
		</div>
		<div class="col-md-6">
			<div class="form-group">
			  	<label for="vucut-kitle-indeks_cm">{{__("Boy(cm)")}}:</label>
			  	<input type="number" name="boy" size="10" class="form-control" id="vucut-kitle-indeks_cm">
			</div>
		</div>
	</div>
	<div class="form-group">
	  	<button type="button"  class="btn btn-primary" onClick="vucutKitleIndex()">{{__('Kontrol Et')}}</button>
	  	<button type="reset" class="btn btn-warning" >{{__('Temizle')}}</button>
	</div>

	<div id="vucut-kitle-indeks_result">
		<div class="alert alert-info">{{__('Vücut Kitle Endeksiniz')}}: <strong id="vucut-kitle-indeks_endeks"></strong> {{__("sonucuna göre")}} <strong...