JSFiddle - React, Tailwind, and code Playground

by freedawirl

HTML

<script src="https://maps.google.com/maps/api/js?sensor=false"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<div class="container">
    <div class="row">
        <!-- You can make it whatever width you want. I'm making it full width on <=s mall devices and 4/12 page width on>= medium devices -->
        <div class="col-xs-12 col-md-4">
            <!-- CREDIT CARD FORM STARTS HERE -->
            <div class="panel panel-default credit-card-box">
                <div class="panel-heading display-table">
                    <div class="row display-tr">
                         <h3 class="panel-title display-td">Payment Details</h3>

                        <div class="display-td">
                            <img class="img-responsive pull-right" src="http://i76.imgup.net/accepted_c22e0.png">
                        </div>
                    </div>
                </div>
                <div class="panel-body">
                    <form role="form" id="payment-form">
                        
                        <div class="row">
                            <div class="col-xs-7 col-md-7">
                                <div class="form-group">
                                    <label for="cardExpiry">Label</label>
                                    <input type="tel" class="form-control" name="cardExpiry" placeholder="MM / YY" autocomplete="cc-exp" required />
                                </div>
                            </div>
                            <div class="col-xs-5 col-md-5 pull-right">
                                <div class="form-group">
                   ...

CSS

.auto-style1 {
    width: 145px;
}
.auto-style2 {
    width: 5px;
}
.auto-style3 {
    width: auto;
}
.auto-style4 {
    width: 175px;
}
.auto-style5 {
    width: 145px;
}
.clearfix:after {
    content:".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    zoom: 1;
    /* triggers hasLayout */
}
div#crosshair {
    position: absolute;
    top: 192px;
    height: 19px;
    width: 19px;
    left: 50%;
    margin-left: -8px;
    display: block;
    background: url(crosshair.gif);
    background-position: center center;
    background-repeat: no-repeat;
}
.fieldset-auto-width {
    display: inline-block;
}
form span.req {
    display: inline;
    float: none;
    color: red !important;
    font-weight: bold;
    margin: 0;
    padding: 0;
}
.fullscreen {
    position: relative;
    top: 0px;
    left: 0px;
    z-index: -50;
}
.boxes {
    background-color: lightgray;
    border: 3px solid black;
}
#map {
    top: 9px;
    position: absolute;
}
#top {
    position: relative;
    z-index: 50;
    width: 706px;
}
/* Padding - just for asthetics on Bootsnipp.com */
 body {
    margin-top:20px;
}
/* CSS for Credit Card Payment form */
 .credit-card-box .panel-title {
    display: inline;
    font-weight: bold;
}
.credit-card-box .form-control.error {
    border-color: red;
    outline: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 0, 0, 0.6);
}
.credit-card-box label.error {
    font-weight: bold;
    color: red;
    padding: 2px 8px;
    margin-top: 2px;
}
.credit-card-box .payment-errors {
    font-weight: bold;
    color: red;
    padding: 2px 8px;
    margin-top: 2px;
}
.credit-card-box label {
    display: block;
}
/* The old "center div vertically" hack */
 .credit-card-box .display-table {
    display: table;
}
.credit-card-box .display-tr {
    display: table-row;
}
.credit-card-box .display-td {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
}
/* Just looks nicer */
...

JavaScript

//<![CDATA[
var Page_Validators = new Array(document.getElementById("RequiredFieldValidator4"), document.getElementById("RangeValidator1"), document.getElementById("ageRequiredFieldValidator"), document.getElementById("CompareValidator1"), document.getElementById("HNRangeValidator"), document.getElementById("RegularExpressionValidator5"), document.getElementById("cvChildren"));
//]]>
//<![CDATA[
var RequiredFieldValidator4 = document.all ? document.all["RequiredFieldValidator4"] : document.getElementById("RequiredFieldValidator4");
RequiredFieldValidator4.controltovalidate = "faddress3";
RequiredFieldValidator4.errormessage = "Required field.";
RequiredFieldValidator4.display = "Dynamic";
RequiredFieldValidator4.validationGroup = "qa";
RequiredFieldValidator4.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
RequiredFieldValidator4.initialvalue = "";
var RangeValidator1 = document.all ? document.all["RangeValidator1"] : document.getElementById("RangeValidator1");
RangeValidator1.controltovalidate = "age";
RangeValidator1.errormessage = "Age should be between 18 and 100 years.";
RangeValidator1.display = "Dynamic";
RangeValidator1.validationGroup = "qa";
RangeValidator1.type = "Integer";
RangeValidator1.evaluationfunction = "RangeValidatorEvaluateIsValid";
RangeValidator1.maximumvalue = "100";
RangeValidator1.minimumvalue = "18";
var ageRequiredFieldValidator = document.all ? document.all["ageRequiredFieldValidator"] : document.getElementById("ageRequiredFieldValidator");
ageRequiredFieldValidator.controltovalidate = "age";
ageRequiredFieldValidator.errormessage = "Required field.";
ageRequiredFieldValidator.display = "Dynamic";
ageRequiredFieldValidator.validationGroup = "qa";
ageRequiredFieldValidator.evaluationfunction = "RequiredFieldValidatorEvaluateIsValid";
ageRequiredFieldValidator.initialvalue = "";
var CompareValidator1 = document.all ? document.all["CompareValidator1"] :...