JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<span id="error_message" class="error_msge">
                    
                </span>

<div>&nbsp;</div>
<form autocomplete="off" class="basicForm" id="basicForm" method="POST" action="education_health.html">
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="header">
                <div class="row">
                    <div class="col-xs-10 col-sm-11 col-md-11 col-lg-11 pad-top"> <span class="info_txt" id="basic_Help">Information</span>

                    </div>
                    <div class="col-xs-2 col-sm-1 col-md-1 col-lg-1"> <a id="expand" class="expand" href="#">
                          <div id="ico" class="pull-right minus_pos1 minus"></div>
                       </a>

                    </div>
                </div>
            </div>
            <div id="collapse" class="body toggle ">
                <div class="container-fluid">
                    <!-- first row-->
                    <div class="row">
                        <div class="col-md-5 col-sm-6 col-xs-12 col-lg-5 appl_cust_wid">
                            <label class="cstm_ap">Applying to</label>
                            <br/>
                            <div class="edu">
               ...

CSS

.error_message {
    background-color: lightcoral;
    color:white;
    border:1px solid red;
    text-align: center;
}
.errRed {
    color: black !important;
    border: 1px solid #EA373D !important;
    padding: 6px !important;
}
.errRed_chkb {
    color: black !important;
    outline-color: #EA373D;
    outline-style: solid;
    outline-width: thin;
}
.error_msge {
    border:1px solid red;
    width: 450px;
    margin: 0px auto;
    text-align: center;
    background-color: #FFBABA!important;
    padding: 5px;
}
.header {
    height: 30px;
    background-color: black;
    color: white;
    padding-left: 5px;
    padding-bottom: 5px;
    font-size: 15px;
    letter-spacing: 1px;
}
.plus:before {
    content:"\f196";
    font-family: FontAwesome;
    font-size: 24px;
    color:white;
    float: right;
    padding-right: 15px;
    text-decoration: none;
}
.minus:before {
    content:"\f147";
    font-family: FontAwesome;
    font-size: 24px;
    color:white;
    padding-right: 15px;
    float: right;
    text-decoration: none;
}
/* tooltip starts here */
 .atooltip {
    cursor:pointer;
    color: black;
}
.cstmtooltip {
    width:300px;
    height:auto;
    background-color: WHITE;
    border: 1px solid #a2a2a2;
    padding:5px;
    position: absolute;
    top: 20px;
    color: black;
}
.headborder {
    border-bottom:1px solid #a2a2a2;
    font-size: 17px;
    margin-bottom: 18px;
    margin-top: 3px;
    text-align: center;
    color: black;
}
.bodytip {
    font-size: 14px;
    margin-top: -15px;
    white-space: pre-line;
}
.ctnedu {
    left:150px !important;
}
.campmob {
    right:140px !important;
    z-index: 1;
}
/* tooltip ends here */

JavaScript

$(document).ready(function () {
    $(".error_msge").hide();
    $(".slt_mjrpg1,.mjr_Descpg,.mjr_Descpg1,.slt_mjrpg,.cn_desc,.mob_des").hide();

    $('input[type="radio"]').change(function () {
        if ($(this).val() == 'pg') {
            $(".slt_mjrpg,.slt_mjrpg1,.cn_desc,.mob_des").show();
            $(".slt_mjr,.slt_mjr1").hide();
            $('.slt_mjr').removeClass('errRed');
            $('.mjr_Desc').val('');
            $('.mjr_Desc1').val('');
            $('.pl_Stus').val('');
            $('.pl_Stus1').val('');
        } else {
            $(this).val() == 'ug';
            $(".slt_mjr,.slt_mjr1").show();
            $(".slt_mjrpg,.slt_mjrpg1,.cn_desc,.mob_des").hide();

        }
    });
    $(".cstmtooltip").hide();
    $(".help").on({
        mouseenter: function (e) {
            var cstmtooltip = $(this).next();
            //alert("check"+ cstmtooltip);
            cstmtooltip.show();
            // cstmtooltip.css('left',80);
            cstmtooltip.css('z-index', 10);

        },
        mouseleave: function () {
            $(this).next().hide();
        }
    });
    $('.slt_mjr').change(function () {
        var selectedValue = $(this).val();
        $(".mjr_Desc").val($(this).find("option:selected").attr("value"));
        $(".pl_Stus").val('Applied');
    });
    $('.slt_mjr1').change(function () {
        var selectedValue = $(this).val();
        $(".mjr_Desc1").val($(this).find("option:selected").attr("value"));
        $(".pl_Stus1").val('Applied');
    });
    $('.slt_mjrpg').change(function () {
        var selectedValue = $(this).val();
        $(".mjr_Descpg").val($(this).find("option:selected").attr("value"));
        $(".pl_Stus").val('Applied');

    });
    $('.slt_mjrpg1').change(function () {
        var selectedValue = $(this).val();
        $(".mjr_Descpg1").val($(this).find("option:selected").attr("value"));
        $(".pl_Stus1").val('Applied');
    });
    $('.slt_ctr').change(function () {
        var...