JSFiddle - React, Tailwind, and code Playground

HTML

<div class="app defrosting_app">
    <div class="app_title">
        	<h2>Defrosting Times Calculator</h2>

    </div>
    
   <form id="defrostCalculator" name="defrostCalculator" onsubmit="callbackDefrost(this.elements.meatWeight.value); return false;" method="GET">
        <fieldset>
            <p>Select the method of defrosting you'd like to use:</p>
            <div>
                <input type="radio" id="radio01" class="fridge" name="method" />
                <label for="radio01"><span></span>In the fridge</label>
            </div>
            <div>
                <input type="radio" id="radio02" class="water" name="method" />
                <label for="radio02"><span></span>Running under cold water</label>
            
            <p>Select the type meat you'd like to defrost:</p>
            <div>
                <input type="radio" id="radio03" name="radio" />
                <label for="radio03"><span></span>Chicken</label>
            </div>
            <div>
                <input type="radio" id="radio04" name="radio" />
                <label for="radio04"><span></span>Turkey</label>
            </div>
            <div>
                <input type="radio" id="radio05" name="radio" />
                <label for="radio05"><span></span>Lamb</label>
            </div>
            <div>
                <input type="radio" id="radio06" name="radio" />
                <label for="radio06"><span></span>Beef</label>
            </div>
            <div>
                <input type="radio" id="radio07" name="radio" />
                <label for="radio07"><span></span>Pork</label>
            </div>
            <div>
                <input type="radio" id="radio08" name="radio" />
                <label for="radio08"><span></span>Seafood</label>
            </div>
            <p>
                <h4>Enter how much your meat weighs:</h4>
            </p>
            <p>
                <label for="meatWeight">Weight (Kg)</label>
                <input...

CSS

@import url(http://fonts.googleapis.com/css?family=Ubuntu:regular,bold&subset=Latin);
 p {
    font-family:"Ubuntu";
}

h2 {
    font-family:"Ubuntu";
    color: #c2002f
}

h4 {
    font-family:"Ubuntu";
    color: #c2002f
}
input {
    font-family:"Ubuntu";
}
div {
    margin: 0 0 0.75em 0;
}
input[type="radio"] {
    display: none;
}
input[type="radio"] + label {
    color: #292321;
    font-family: Arial, sans-serif;
    font-size: 14px;
}
input[type="radio"] + label span {
    display: inline-block;
    width: 19px;
    height: 19px;
    margin: -1px 4px 0 0;
    vertical-align: middle;
    cursor: pointer;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
input[type="radio"] + label span {
    background-color: #292321;
}
input[type="radio"]:checked + label span {
    background-color: #C2002f;
}
input[type="radio"] + label span, input[type="radio"]:checked + label span {
    -webkit-transition: background-color 0.4s linear;
    -o-transition: background-color 0.4s linear;
    -moz-transition: background-color 0.4s linear;
    transition: background-color 0.4s linear;
}
.button {
    background: #3498db;
    background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
    background-image: -moz-linear-gradient(top, #3498db, #2980b9);
    background-image: -ms-linear-gradient(top, #3498db, #2980b9);
    background-image: -o-linear-gradient(top, #3498db, #2980b9);
    background-image: linear-gradient(to bottom, #3498db, #2980b9);
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    font-family: Arial;
    color: #ffffff;
    font-size: 20px;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
}
.button:hover {
    background: #3cb0fd;
    background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
    background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
   ...

JavaScript

$(document).ready(function(){
    
    // Setup variable as empty
	var method = "";

	// Detect when initial radio button is clicked
	$("input[type=radio]").click(function() { 

		// Get the weight from the input box
		var weight = $("#meatWeight").val();

		// If the water method was clicked
		if ($(this).hasClass("water")) {
			var method = weight * 60;
			// Show me what the value is (can be removed)
			alert(method);
		
		// If the fridge method was clicked
		} else if 
			($(this).hasClass("fridge")) {
				var method = weight * 793;
				// Show me what the value is (can be removed)
				alert(method);
			}
		});
});

function defrost(weight) {
    return (makeTime(method));
}

function callbackDefrost(weight) {
    document.forms.defrostCalculator.elements.meatWeight.value = weight;
    document.forms.defrostCalculator.elements.defrostTime.value = defrost(weight);
}

function makeTime(time) {
    var hours = parseInt(time / 60, '60');
    var minutes = parseInt(time % 60, '60');
    return (hours + ' hrs and ' + minutes + ' mins');
}