JSFiddle - React, Tailwind, and code Playground

by themhz

HTML

<style>
.hr{
	background-color:#fff;
	border:#000 1px dotted;
	border-style: none none dotted;
	color:#fff;
}
#buttonset{
	float:left;
}
.ck-button {
    margin:3px;
    background-color:#EFEFEF;
    border-radius:4px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
    height:20px;

}


.ck-button:hover {    
    background-color:#72B41E;    
    border:1px solid #72B41E;        
    color:#FFFFFF;
}

.ck-button label {
    float:left;
    width:20px;
}

.ck-button label span {
    text-align:center;
    padding:0px 0px;
    display:block;
    font-size:10px;
}

.ck-button label input {
    position:absolute;
    top:-20px;
}
.ck-button label {
    display: block;
    position: relative;
    overflow: hidden;
}

.ck-button input:checked + span {
    background-color:#72B41E;
    color:#fff;
}

.btn-sample {
	color: #242323;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	background-color: #EDEDED;
	*background-color: #EDEDED;
	background-image: -moz-linear-gradient(top, #FFFFFF, #EDEDED);
	background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#FFFFFF), to(#EDEDED));
	background-image: -webkit-linear-gradient(top, #FFFFFF, #EDEDED);
	background-image: -o-linear-gradient(top, #FFFFFF, #EDEDED);
	background-image: linear-gradient(to bottom, #FFFFFF, #EDEDED);
	background-repeat: repeat-x;
	border-color: #EDEDED;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#EDEDED', GradientType=0);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-sample:hover,
.btn-sample:active,
.btn-sample.active,
.btn-sample.disabled,
.btn-sample[disabled] {
	color: #615E5E;
	background-color: #EDEDED;
	*background-color: #003bb3;
}

</style>

<div class="row">
<div class="span12 billingShipping">
<h2>Order WrAP/WPP:
    <small>Billing and Shipping Information</small>
</h2>

<div class="panel">
    <h3>1. WrAP Contact:</h3>

   ...

JavaScript

var PaymentCtrl = function ($scope, tools, security, $storage, $location) {
    $scope.testingDates = [];
    $scope.newWppContact = false;
    $scope.testingDates.push(getDateObject());
    $scope.testMaterialDate = getDateObject();
    $scope.states = USStates;
    $scope.editMode = false;
    var WPPOnlyProductId = 3;

    //default values
    $scope.paymentMethod = 'po';
    $scope.wppContactOption = 'same';

    $scope.paymentMethods = paymentMethods;
    $scope.contactOptions = contactOptions;

    $scope.billingOption = undefined;
    $scope.shippingOption = undefined;

    $scope.countries = countries;
    $scope.creditCardTypes = creditCardTypes;
    $scope.editMode = false;

    var accountTable = $storage('salesForceAccount');
    var account = accountTable.getItem(0).account;
    var contact = accountTable.getItem(0).contact;
    $scope.isWPPOnly = checkIfWPPOnly();
    $scope.isDistrict = (account.School_Level__c == "District");

    function checkIfWPPOnly() {
        var orderTable = $storage('order');
        var order = orderTable.getItem(0);
        var orderItems = [];
        order.orderGradesQuantities.forEach(function (item) {
            if (item && item.gradeQuantities) {
                item.gradeQuantities.forEach(function (grade) {
                    if (grade.quantity > 0) {
                        orderItems.push({id: item.id});
                    }
                });
            }
        });
        var wppOnlyItems = orderItems.filter(function (n) {
            return n.id == WPPOnlyProductId;
        });

        return (wppOnlyItems.length == orderItems.length);
    }

    var extraOptions = {
        newBilling: {
            text: 'Enter New Billing Address',
            type: 'new'
        },

        newShipping: {
            text: 'Enter New Shipping Address',
            type: 'new'
        },
        sameAsBilling: {
            type: 'same',
            text: 'Same As Billing Address'
        }
    };

    var...