JSFiddle - React, Tailwind, and code Playground

by Milan Bastola

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<section class="classes-page container-fluid">
    <div class="container">
      <form class="calculation">
        <div class="row">
          <div class="col-md-8">
            <div class="userInfo" style="padding: 20px; border: 1px solid #f00; background: #f9f9f9;">
              <h3 style="text-align:center; text-transform:uppercase;">Enter Your Information</h3>
              <div class="form-row">
                <div class="form-group col-md-6">
                  <label for="inputFirstName">First Name <span>*</span></label>
                  <input type="text" class="form-control" id="inputFirstName" placeholder="Enter First Name" onFocus="startCalc();" onBlur="stopCalc();">
                </div>
                <div class="form-group col-md-6">
                  <label for="inputLastName">Last Name <span>*</span></label>
                  <input type="text" class="form-control" id="inputLastName" placeholder="Enter Last Name" onFocus="startCalc();" onBlur="stopCalc();">
                </div>
              </div>
              <div class="form-row">
                <div class="form-group col-md-6">
                  <label for="inputEmail">Email <span>*</span></label>
                  <input type="email" class="form-control" id="inputEmail" placeholder="Enter Your Email" onFocus="startCalc();" onBlur="stopCalc();">
                </div>
                <div class="form-group col-md-6">
                  <label for="inputPhone">Phone <span>*</span></label>
                  <input type="tel"...

CSS

.underEighteen {
    padding: 20px;
    border: 1px solid #009688;
    background: #ecfffd;
    margin-top: 20px;
}

.overEighteen {
    padding: 20px;
    border: 1px solid #E91E63;
    background: #ffe7ef;
    margin-top: 20px;
}

.text-muted {
    color: #6c757d!important;
    font-size: 12px;
    line-height: 1;
}

.userInfo h3, .underEighteen h3, .overEighteen h3 {
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 25px;
}

table#details {
    font-size: 16px;
}

.table-dark td, .table-dark th, .table-dark thead th {
    padding: 5px 10px;
}

JavaScript

(function($) {
	$(document).ready(function(){

		var userInfo = $('.userInfo');
    var inputFirstName = $('#inputFirstName');
    var inputLastName = $('#inputLastName');
    var inputEmail = $('#inputEmail');
    var inputPhone = $('#inputPhone');
    var inputProfession = $('#inputProfession');
    var inputUnderEighteen = $('#inputUnderEighteen');
    var inputOverEighteen = $('#inputOverEighteen');

    var underEighteen = $('.underEighteen');
    var selectSessionType = $('#selectSessionType');
    var sessionDays = $('.sessionDays');
    var sessionSunday = $('#sessionSunday');
    var sessionMonday = $('#sessionMonday');
    var sessionTuesday = $('#sessionTuesday');
    var sessionWednesday = $('#sessionWednesday');
    var sessionThursday = $('#sessionThursday');
    var sessionFriday = $('#sessionFriday');
    var sessionSaturday = $('#sessionSaturday');
    var sessionTime = $('.sessionTime');
    var sessionMorning = $('.sessionMorning');
    var eightnine = $('#eight-nine');
    var nineten = $('#nine-ten');
    var teneleven = $('#teneleven');
    var eleventwelve = $('#eleven-twelve');
    var sessionEvening = $('.sessionEvening');
    var fourfive = $('#four-five');
    var fivesix = $('#five-six');
    var sixseven = $('#six-seven');
    var seveneight = $('#seven-eight');
    var overEighteen = $('.overEighteen');

    //Hide required DIVs
    sessionEvening.hide();
    sessionMorning.hide();
    sessionDays.hide();
    underEighteen.hide();
    overEighteen.hide();

    $('input[name="selectYourAge"]').click(function() {
    	$('.underEighteen').show();
        // var inputValue = $(this).attr("value");
        // var targetBox = $("." + inputValue);
        // $(".age").not(targetBox).hide();
        // $(targetBox).show();
    });

    $("#selectSessionType").change(function() {
        if (!$(this).val()) {
            sessionDays.hide();
        } else {
            sessionDays.show();
        }
    });

    $(".weekday,...