JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.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.css">
<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/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.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/images/ui-bg_diagonals-thick_18_b81900_40x40.png"></script>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-xs-12 col-sm-12 col-md-12 cnt"> <span id="error_message" class="error_msge">
                        
                    </span>

        </div>
    </div>
</div>
<form autocomplete="off" class="educationForm" name="educationForm" id="educationForm" method="POST" action="#">
    <div id="wrap">
        <div id="main" class="form_wrapper">
            <!--Educational Information-->
            <div class="container-fluid" id="edu_info">
                <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">Educational Information</span>
 <a class="help atooltip edu_help_icn"><i class="fa fa-question-circle help_icon"></i></a>

                                <!-- Educational Table Help Pop up -->
                                <div class="cstmtooltip ctnedu ctneduinfo">
                                    	<h2 class="headborder">Educational Info</h2>

                                    <p class="bodytip">
                                        <ul>
          ...

CSS

html body {
    font-family:'MyriadProLight', Arial;
    padding:0;
    margin:0;
    height:100%
}
#footer {
    bottom:7%;
    clear:both;
    height:0;
    margin-top:0;
    position:absolute
}
.txt_field {
    border:1px solid #aeaeae
}
.row {
    margin-left:0;
    margin-right:0
}
.main_header {
    background:url(../images/header_image.jpg) repeat-x;
    height:80px
}
.pay_text_info {
    font-size:14px
}
.txt_usrid {
    margin-left:76px!important
}
.txt_usrid1 {
    margin-left:50px!important
}
.btn_Chgpass {
    background-color:#049f51;
    border-color:-moz-use-text-color -moz-use-text-color #000;
    border-radius:0;
    border-style:none none solid;
    border-width:0 0 2px;
    color:#fff;
    font-family:arial;
    font-size:14px;
    height:28px
}
.emir_id {
    left:40px;
    position:relative
}
.margin-top-set-icon {
    margin-top:16px
}
.ctm_widt {
    width:196px;
    height:25px
}
.applt_label {
    font-size:14px;
    font-weight:700
}
.applt_value {
    font-size:14px
}
.applt_value_m {
    font-size:14px;
    color:red
}
.container_white {
    width:80%;
    height:300px;
    background-color:#fff;
    border:1px solid #000
}
.clon_pho {
    margin-left:1%
}
.cnt {
    text-align:center
}
.ctm_desc_wid {
    width:375px!important
}
.atooltip {
    cursor:pointer;
    color:#000
}
.cstmtooltip {
    width:300px;
    height:auto;
    background-color:#fff;
    border:1px solid #a2a2a2;
    padding:5px;
    position:absolute;
    top:20px;
    color:#000
}
.headborder {
    border-bottom:1px solid #a2a2a2;
    font-size:17px;
    margin-bottom:18px;
    margin-top:3px;
    text-align:center;
    color:#000
}
.bodytip {
    font-size:14px;
    margin-top:-15px;
    white-space:pre-line
}
.ctnedu {
    left:150px!important
}
.campmob {
    right:140px!important;
    z-index:1
}
::-webkit-input-placeholder {
    padding-left:5px!important;
    font-size:12px
}
::-moz-placeholder {
    padding-left:5px!important;
    font-size:12px;
   ...

JavaScript

$(document).ready(function () {
			 var $errorMessageDiv = $("#error_message"),
				 $phyexpyDiv = $("#phydisb"),
				 $preview = $(".preview"),
				 $expDiv = $("#expy"),
				 $customFileInput = $('#custom-file-input');
			 $errorMessageDiv.hide();
			 $phyexpyDiv.hide();
			 $preview.hide();
			 $expDiv.hide();
			 $('.error_msge').hide();
			 apply_validation();
			 $(".oth_txt").hide();
			 $(document).on('click', ".chk_field_hlt", function () {
				 if ($('.chk_clk').prop('checked')) {
					 $(".oth_txt").show();
				 } else {
					 $(".oth_txt").hide();
				 }
			 });
			 $(".cu").click(function () {

				 $(".cloned-row1").css("background", "yellow")
			 });
			 /*expand collapse start here*/
			 $(".expand").click(function () {
				 var state = $(this).children("div").hasClass("minus");
				 if (state == true) {
					 $(this).children("div").addClass("plus");
					 $(this).children("div").removeClass("minus");
				 } else {
					 $(this).children("div").removeClass("plus");
					 $(this).children("div").addClass("minus");
				 }
				 $(this).parents(".header").next("#collapse").toggle();
			 });
			 /*expand collapse ends here*/
			 /*tooltip starts here*/
			 $(".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();
				 }
			 });
			 /*tooltip ends here*/
			 /*value extract starts here*/
			 $(document).on('change', '.txt_schName,.txt_degreName', function () {
				 var schoolObj = $(this).parent().next().find(".school_Name,.degree_Description");
				 schoolObj.val($(this).val());
				 if ($(this).val() == "other") {
					 schoolObj.prop('disabled', false);
					 schoolObj.val('');
				 } else {
					 schoolObj.prop('disabled', true);
				 }
			 });
			 $(".txt_scr").on('change', function ()...