react template

HTML

<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

body {
    background-color: #334958;
    font-size: 15px;
}

.Button {
    font-size: 100%;
    background-color: #749A40;
    border: 1px solid #3D576B;
}

.WorkOrderItem {
    border-radius: 4px;
    background: #FFF;
    padding: 10px;
    box-shadow: 0px 4px 4px 0px #000000;
}

.WorkOrderItem.Card {
    border-radius: 0px 0px 4px 4px;
    border-right: 1px solid #DADADA;
    border-bottom: 1px solid #DADADA;
    border-left: 1px solid #DADADA;
}

.TypeHeader.Card {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    border: 1px solid #496170;
    background-image: -o-linear-gradient(-89deg, #334958 0%, #273845 100%);
    background-image: -moz-linear-gradient(-89deg, #334958 0%, #273845 100%);
    background-image: -ms-linear-gradient(-89deg, #334958 0%, #273845 100%);    
    background-image: linear-gradient(-179deg, #334958 0%, #273845 100%);
    line-height: 18px;
    text-align: center;
    font-size: 20px;
    text-transform: uppercase;
    color: #EEE;
}

.TypeHeader.Card > span div img{
    height: 25px;
    margin: 0px 15px;
    vertical-align: middle;
}

.WorkOrderCardContainer  {
    width: 300px;
    display: inline-block;
    box-sizing: border-box;
}

JavaScript 1.7

/** @jsx React.DOM */
var CustomerCardView = React.createClass({
    render: function() {
		var address = this.props.Contact.CustomerInformation.PrimaryAddress.split(",");
		return (
			<div>
				<div className="TypeHeader Card">{this.props.Contact.Contact.Name}</div>
				<div className="WorkOrderItem Card" style={{"marginTop": "0px"}}>
					<div>
						<div style={{"marginTop": "10px"}}>
							<div className="IconDiv OSInline">
								<span className={"fa fa-fw fa-home"}></span>
							</div>
							<div className="InfoDiv OSInline">
								<div>{address[0]}</div>
								<div>{address[1]}</div>
								<div>{address[2]}</div>
							</div>
						</div>
						<div className="ContactLink OSAutoMarginTop">
							<div>
								<div className="IconDiv OSInline">
									<span className={"fa fa-fw fa-phone"}></span>
								</div>
								<div className="InfoDiv OSInline">
									<a href="tel:+{this.props.Contact.Contact.Phone}">{this.props.Contact.Contact.Phone}</a>
								</div>
							</div>
						</div>
						<div className="ContactLink OSAutoMarginTop">
							<div>
								<div className="IconDiv OSInline">
									<span className={"fa fa-fw fa-mobile"}></span>
								</div>
								<div className="InfoDiv OSInline">
									<a href="tel:+{this.props.Contact.Contact.Mobile}">{this.props.Contact.Contact.Mobile}</a>
								</div>
							</div>
						</div>
						<div className="ContactLink OSAutoMarginTop">
							<div>
								<div className="IconDiv OSInline">
									<span className={"fa fa-fw fa-envelope-o"}></span>
								</div>
								<div className="InfoDiv OSInline">
									<a href="mailto:{this.props.Contact.Contact.Email}">{this.props.Contact.Contact.Email}</a>
								</div>
							</div>
						</div>
						<div className="ContactLink OSAutoMarginTop" />
						<div className="OSAutoMarginTop" align="center">
							<input type="submit" value="See Details" className="Button ButtonDefault Is_Default"...