JSFiddle - React, Tailwind, and code Playground

by tonytlwu

HTML

<div id="content">
    <div id="breadcrumbs">
        <ul>
            <li id="liplan"><a rel="relplan" href="#planbc">Plans &raquo;</a>
            </li>
            <li id="lilimited"><a rel="rellimited" href="#limitedbc">Limited Coverage &raquo;</a>
            </li>
            <li id="licomprehensive"><a rel="relcomprehensive" href="#comprehensivebc">Comprehensive Coverage
                 &raquo;</a>
            </li>
            <li id="lipersonal"><a href="#personalinfobc">Personal Details</a>
            </li>
        </ul>
    </div>	<a id="planbc"></a>

    <div id="plan">
         <h1 class="shadow">Available Plans</h1>

        <div id="limitedC" class="bordernbk">
             <h2>Limited Coverage</h2>

            <p>limited coverage plan provides the basic protection, and may not be adequate. It may cost you less. but the coverage is limited to pre defined clause of fix amount of changes. Must read policy detail for benefit and coverage details.</p>
            <button id="optionLimited" class="right shadowS">Select</button>
        </div>
        <div id="comprehensiveC" class="bordernbk">
             <h2>Comprehensive Coverage</h2>

            <p>These plans offer much better and flexible coverage. Most of these plans work like PPO type of 80-20% plan. Means insured have to pay 20% of the cost forthe first $5,000 per policy period policy pays rest 80%.</p>
            <button id="optionComprehensive" class="right shadowS ">Select</button>
        </div>
    </div>
    <!-- closes plan--> <a id="limitedbc"></a>

    <div id="limitedCoverage">
         <h1 class="shadow">Limited Coverage</h1>

        <div id="limitedPlanA">
            <button class="button">Limited Plan A</button>
             <h2>Limited Plan A</h2>

            <p>Limited Plan A provides basic medical coverage for non-U.S. citizens, who come to the U.S. for business, pleasure, to study, or to immigrate with a maximum covarage of $120,000.</p>
            <div class="bar">
  ...

CSS

body {
    font:100%/1.2 Verdana, Arial, sans-serif;
    margin:0;
    padding:0;
    color:#000;
}
h1 {
    font:bold 220%/1.8"Times New Roman", Times, serif;
    letter-spacing:.03em;
    border:1px solid #1dcdd8;
    background-color:#1dcdd8;
    border-radius:5px;
    text-indent:1em;
    word-sapcing:.05em;
    color:white;
}
button:hover {
    background-color:#64bcbf;
}
#breadcrumbs {
    display:none;
}
#content ul {
    margin:0 auto;
    width:700px;
    padding:10px 0px 0px;
}
ul li {
    list-style:none;
    display:inline;
}
ul li a {
    color:#C30;
    text-decoration:none;
}
#plan {
    margin:0 auto;
    width:700px;
    height:680px;
    background:#9CF;
    border-radius: 5px;
    color:#666;
    background: rgba(240, 248, 255, 1);
    background: -moz-linear-gradient(left, rgba(240, 248, 255, 1) 0%, rgba(209, 250, 255, 1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(240, 248, 255, 1)), color-stop(100%, rgba(209, 250, 255, 1)));
    background: -webkit-linear-gradient(left, rgba(240, 248, 255, 1) 0%, rgba(209, 250, 255, 1) 100%);
    background: -o-linear-gradient(left, rgba(240, 248, 255, 1) 0%, rgba(209, 250, 255, 1) 100%);
    background: -ms-linear-gradient(left, rgba(240, 248, 255, 1) 0%, rgba(209, 250, 255, 1) 100%);
    background: linear-gradient(to right, rgba(240, 248, 255, 1) 0%, rgba(209, 250, 255, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0f8ff', endColorstr='#d1faff', GradientType=1);
}
#limitedCoverage {
    margin:0 auto;
    width:700px;
    height:650px;
    background:#9CF;
    border-radius: 5px;
    display:none;
}
#comprehensiveCoverage {
    margin:0 auto;
    width:700px;
    height:930px;
    background:#9CF;
    border-radius: 5px;
    display:none;
}
#personalInfo {
    margin:0 auto;
    width:700px;
    height:100%;
    background:#9CF;
    border-radius: 5px;
    display:none;
}
#limitedC {
    margin:50px auto;
    padding:10px 10px 10px...

JavaScript

//		for next clicking
	var indicator;
	var i = 2;

	function showPersonalInfo() {
	    $("#personalInfo").css("display", "block");
	}

	function hideInsuranceInfo() {
	    $("#insuranceInfo").hide();
	}

	function showSubmitPlusAdd() {
	    $("#submitplusadd").css("display", "block");
	}

	function hideSubmitPlusAdd() {
	    $("#submitplusadd").hide();
	}

	function formProducer() {
	    //showPersonalInfo();

	    var x = $(".insuranceInfo").clone();
	    $("#personalInfo").append(x);
	    if (i < 7) {
	        $("#number").text(i);
	        $("#name").val("");
	        $("#address1").val("");
	        $("#address2").val("");

	    }

	}
	//clicking on the two select button in the first screen
	//avaiable plan screen

	$("#optionLimited").click(function () {
	    indicator = "true";
	    $("#limitedCoverage").css("display", "block");
	    $("#breadcrumbs").css("display", "block");
	    if (($("ul li:nth-child(2)").html()) != " ") {
	        $("ul li:nth-child(2)").html("<a rel='rellimited' href='#limitedbc'>Limited Coverage &raquo;</a>");
	        $("ul li:nth-child(3)").text(" ");
	        $("ul li:nth-child(4)").text(" ");
	        //$("ul li:nth-child(2)").replaceWith($("ul li:nth-child(2)").text()); 	
	    };
	    $("#plan").css("display", "none");

	    //alert(indicator);
	});





	//clicking on the two select button in the limited coverage
	//and comprehensive coverage
	$("#limitedCoverage .select").click(function () {

	    $("ul li:nth-child(2)").html("<a rel='rellimited' href='#limitedbc'>Limited Coverage &raquo;</a>");
	    $("ul li:nth-child(4)").html("<a href='#personalinfobc'>Personal Details</a>");
	    showPersonalInfo();
	    $("#limitedCoverage").css("display", "none");
	    indicator = "true";
	});

	$("a[href='insured']").bind("click", function (e) {
	    e.preventDefault();
	    var x = $(".insuranceInfo").clone();
	    $("#personalInfo").append(x);
	    if (i < 7) {
	        $("#number").text(i);
	        $("#name").val("");
	       ...