JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<script src="http://momentjs.com/downloads/moment.min.js"></script>
<script src="http://www.beveragemedia.com/wp-content/themes/bevnetwork/images/calendar_view_month.png"></script>
<script src="https://e9913e27efb054ee74af1e2b017427ad8bb332ac.googledrive.com/host/0B4hVzL6SZmkEcWFEN0MxOXp1U2c/Pricing%20Calculator/calendar.js"></script>
<body id="main_body" class="safari">
    <img id="top" src="images/top.png" alt="">
    <div id="form_container">
        	<h1><a>Pricing Calculator</a></h1>

        <form id="form_841596" class="appnitro">
            <div class="form_description">
                	<h2>Pricing Calculator</h2>

                <p></p>
            </div>
            <ul>
                <li id="li_1">
                    <label class="description" for="element_1">Arrival Date</label>	<span>
			<input id="element_1_1" name="element_1_1" class="element text" size="2" maxlength="2" value="" type="text"> /
			<label for="element_1_1">DD</label>
		</span>
	<span>
			<input id="element_1_2" name="element_1_2" class="element text" size="2" maxlength="2" value="" type="text"> /
			<label for="element_1_2">MM</label>
		</span>
	<span>
	 		<input id="element_1_3" name="element_1_3" class="element text" size="4" maxlength="4" value="" type="text">
			<label for="element_1_3">YYYY</label>
		</span>
	<span id="calendar_1">
			<img id="cal_img_1" class="datepicker" src="http://www.beveragemedia.com/wp-content/themes/bevnetwork/images/calendar_view_month.png" alt="Pick a date.">	
		</span>

                    <script type="text/javascript">
                        Calendar.setup({
                            inputField: "element_1_3",
                            baseField: "element_1",
                            displayArea: "calendar_1",
                            button: "cal_img_1",
                            ifFormat: "%B %e, %Y",
                            onSelect: selectEuropeDate
                        });
                    </script>
              ...

CSS

#bottom{display:block;height:10px;margin:0 auto;width:650px;}
#error_message{background:#fff;border:1px dotted red;margin-bottom:1em;padding-left:0;padding-right:0;padding-top:4px;text-align:center;width:99%;}
#error_message_desc{color:#000;font-size:100%;margin:0 0 .8em;}
#error_message_desc strong{background:#FFDFDF;color:red;padding:2px 3px;}
#error_message_title{color:#DF0000;font-size:125%;margin:7px 0 5px;padding:0;}
#footer{clear:both;color:#999;font-size:85%;padding-bottom:15px;text-align:center;width:640px;}
#footer a{border-bottom:1px dotted #999;color:#999;text-decoration:none;}
#form_container{background:#fff;border:1px solid #ccc;margin:0 auto;text-align:left;width:640px;}
#li_captcha{padding-left:5px;}
#li_captcha span{float:none;}
#top{display:block;height:10px;margin:10px auto 0;width:650px;}
* html form li div{display:flex-block;}
* html form li,* html .buttons{height:1%;}
.appnitro{font-family:Lucida Grande, Tahoma, Arial, Verdana, sans-serif;font-size:small;width:auto;}
.appnitro li{width:auto;}
.buttons{clear:both;display:block;margin-top:10px;}
.buttons input{font-size:120%;margin-right:5px;}
.calendar .button{padding:2px;text-align:center;}
.calendar .combo{background:#f5f5f5;border:1px solid #ccc;color:#222;display:none;font-size:90%;left:0;position:absolute;top:0;width:4em;z-index:100;}
.calendar .combo .active{background:#dedede;border-bottom:1px solid #999;border-top:1px solid #999;font-weight:700;}
.calendar .combo .hilite{background:#444;color:#fff;}
.calendar .combo .label,.calendar .combo .label-IEfix{padding:1px;text-align:center;}
.calendar .combo .label-IEfix{width:4em;}
.calendar .nav{background:#f5f5f5;}
.calendar table{background:#fff;border:1px solid #ccc;color:#000;cursor:pointer;font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;font-size:11px;}
.calendar table .wn{background:#666;border-right:1px solid #000;padding:2px;}
.calendar tbody .day{color:#222;padding:2px;text-align:right;width:1.8em;}
.calendar tbody...

JavaScript

var _a = [{
    "Period": "Off-Peak",
        "From": "4/21/2014",
        "To": "7/23/2014",
        "Weekly": "600",
        "Nightly": "100",
        "Minimum Stay": "3 nights",
        "Price Based on": "4 guests",
        "Changeover Day": "Flexible",
        "Weekly (daily rate)": "85.71"
}, {
    "Period": "Peak",
        "From": "7/24/2014",
        "To": "8/31/2014",
        "Weekly": "750",
        "Nightly": "120",
        "Minimum Stay": "7 nights",
        "Price Based on": "4 guests",
        "Changeover Day": "Flexible",

        "Weekly (daily rate)": "107.14"
}, {
    "Period": "Off-Peak",
        "From": "9/1/2014",
        "To": "10/22/2014",
        "Weekly": "600",
        "Nightly": "100",
        "Minimum Stay": "3 nights",
        "Price Based on": "4 guests",
        "Changeover Day": "Flexible",

        "Weekly (daily rate)": "85.71"
}, {
    "Period": "Peak",
        "From": "10/23/2014",
        "To": "11/2/2014",
        "Weekly": "750",
        "Nightly": "120",
        "Minimum Stay": "7 nights",
        "Price Based on": "4 guests",
        "Changeover Day": "Flexible",

        "Weekly (daily rate)": "107.14"
}, {
    "Period": "Off-Peak",
        "From": "11/3/2014",
        "To": "12/17/2014",
        "Weekly": "600",
        "Nightly": "100",
        "Minimum Stay": "3 nights",
        "Price Based on": "4 guests",
        "Changeover Day": "Flexible",

        "Weekly (daily rate)": "85.71"
}, {
    "Period": "Peak",
        "From": "12/18/2014",
        "To": "1/4/2015",
        "Weekly": "750",
        "Nightly": "120",
        "Minimum Stay": "7 nights",
        "Price Based on": "4 guests",
        "Changeover Day": "Flexible",

        "Weekly (daily rate)": "107.14"
}, {
    "Period": "Off-Peak",
        "From": "1/5/2015",
        "To": "4/1/2015",
        "Weekly": "600",
        "Nightly": "100",
        "Minimum Stay": "3 nights",
        "Price Based on": "4 guests",
        "Changeover Day": "Flexible",

       ...