JSFiddle - React, Tailwind, and code Playground

by blue1086

HTML

<form action="" method="post" class="smart-green">
    <h1>Join our mailing list</h1>
    <p class="para">We would love to add you to our mailing list! Stay up to speed with all things web marketing. Simply enter your information below, so we can add you to our list of awesome people!</p>
    <label>
        <span>Your Name:</span>
        <input id="name" type="text" name="name" placeholder="Your Name"/>
    </label>
    <br>
    <label>
        <span>Your Email Address:</span>
        <input id="email" type="text" name="name" placeholder="Your Email Address"/>
    </label>
    <br>
    <label>
        <input type="button" class="button" value="Send" onclick="new Subscriber(document.getElementById('name').value, document.getElementById('email').value).send();"/> 
    </label>    
</form>

CSS

.smart-green {
    margin-left:auto;
    margin-right:auto;

    max-width: 500px;
    background: #F8F8F8;
    background-image: url("http://www.buhvdesigns.com/wp-content/uploads/2015/02/600.jpg");
    padding: 30px 30px 20px 30px;
    font: 12px Arial, Helvetica, sans-serif;
    color: #666;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.para {
    margin-top: -5%;
    color: #ffffff;
}

.smart-green h1 {
    font: 24px "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: 700;
    padding: 20px 0px 20px 30px;
    display: block;
    margin: -30px -30px 10px -30px;
    color: #ffffff;
    background: rbga(0, 0, 0, 1);
    text-shadow: 1px 1px 1px #949494;
    border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0px 0px;
    -moz-border-radius: 5px 5px 0px 0px;
}
.smart-green h1>span {
    display: block;
    font-size: 11px;
    color: #FFF;
}

.smart-green label {
    display: block;
    margin: 0px 0px 5px;
}
.smart-green label>span {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
    color: #ffffff;
    font-weight: 700;
}
.smart-green input[type="text"], .smart-green input[type="email"], .smart-green textarea, .smart-green select {
    color: #000000;
    height: 30px;
    line-height:15px;
    width: 100%;
    padding: 0px 0px 0px 10px;
    margin-top: 2px;
    border: 1px solid #8e8c4b;
    background-color:rgba(255,255,255,0.4);
    outline: 0;
    -webkit-box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
    box-shadow: inset 1px 1px 2px rgba(238, 238, 238, 0.2);
    font: normal 14px/14px Arial, Helvetica, sans-serif;
    border-radius: 5px 5px 5px 5px;
}
.smart-green textarea{
    height:100px;
    padding-top: 10px;
}

.smart-green .button {
    background-color: #afad63;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-border-radius: 5px;
    border: none;
    padding: 10px 25px 10px 25px;
    color: #ffffff;
    text-shadow: 1px 1px 1px...

JavaScript

var Subscriber = function (name, email) {
    var _name  = name,
        _email = email,
        self   = this; // This is used so we can get the name and email variables

    this.name  = _name;
    this.email = _email;

    //To add functions, use this.FunctionName = function () {

    this.validate = function () {
        if (_name == '') {
            alert('Enter a name');
            return false; // Saying that it is invalid
        }
        if (_email == '') {
            alert('Enter an email');
            return false; // Saying that it is invalid
        }

        return true;
    };

    this.send = function () {
        if (self.validate()) { //Validates it
            alert('You are now a subscriber!');
        }
    };
};