React.js HTML email

email.js

define(function(require, exports, module){
    var React     = require('react');
    var constants = require('constants');
    var _         = require('underscore');
    var motivationalLines = [
        'Life isn’t about getting and having, it’s about giving and being.',
        'Whatever the mind of man can conceive and believe, it can achieve.',
        'You miss 100% of the shots you don’t take.',
        'Every strike brings me closer to the next home run.',
        'The mind is everything. What you think you become.',
        'Winning isn’t everything, but wanting to win is.',
        'You will never win if you never begin',
    ]

    var ReactComponent = React.createClass({


        render: function(){
            var pStyle = {
                margin        : '0 auto',
                lineHeight    : '32px',
                color         : '#EFF4F8',
                fontSize      : 20,
                padding       : '5px 20px',
                fontVariant   : 'small-caps',
                textTransform : 'lowercase',
                maxWidth      : 500,
                textAlign     : 'left',
            }
            return React.DOM.div({
                style: {
                    backgroundColor : '#008FFF',
                    borderRadius    : '10px',
                    textAlign       : 'center',
                    paddingBottom   : 10,
                }
            },
                React.DOM.h1({
                    style: {
                        height          : 50,
                        backgroundColor : '#262838',
                        color           : '#D3E4F1',
                        fontVariant     : 'small-caps',
                        fontSize        : 50,
                        paddingBottom   : 9,
                        margin          : 0,
                        borderRadius    : '10px 10px 0 0',
                        textAlign       : 'center',
                    }
                },  React.DOM.span({
                    }, this.props.title),
                    React.DOM.span({
                        style: {
                            fontSize    : 30,
                            color       : '#9AAAB6',
                            paddingLeft : 10,
                        }
                    }, this.props.subTitle)
                ),
                this.props.p.map(function(p){
                    return React.DOM.p({
                        style: pStyle
                    }, p)
                }),
                React.DOM.a({
                    href: constants.APP_URL + '?utm_source=email_marketing',
                    style: {
                        width           : 100,
                        height          : 100,
                        borderRadius    : '50%',
                        backgroundColor : '#F5F8FA',
                        border          : '15px solid #262838',
                        textAlign       : 'center',
                        margin          : '0 auto 20px auto',
                        padding         : 8,
                        display         : 'block',
                        fontSize        : 55,
                        fontVariant     : 'small-caps',
                        fontWeight      : 'bold',
                        overflow        : 'hidden',
                        lineHeight      : '86px',
                        color           : '#262838',
                        textDecoration  : 'none',
                        textIndent      : '-6px',
                    }
                }, 'play'),
                React.DOM.a({
                    href: constants.COMMUNITY_URL,
                    style: {
                        maxWidth        : 500,
                        borderRadius    : '5px',
                        backgroundColor : 'rgba(0, 0, 0, 0.33)',
                        textAlign       : 'center',
                        margin          : '0 auto 20px auto',
                        padding         : 8,
                        display         : 'block',
                        fontSize        : 30,
                        fontVariant     : 'small-caps',
                        fontWeight      : 'bold',
                        overflow        : 'hidden',
                        color           : '#262838',
                        textDecoration  : 'none',
                    }
                }, 'go to community'),
                React.DOM.p({
                    style: pStyle
                }, "Have an amazing day (:"),
                React.DOM.p({
                    style: pStyle
                }, motivationalLines[Math.floor(Math.random()*motivationalLines.length)])
            )
        }
    });

    return ReactComponent;
});