JSFiddle - React, Tailwind, and code Playground

by hart1994

HTML

<script src="http://sparkjs.co.uk/assets/downloads/Spark-v1.4.1.js"></script>
<div class='contact'>
   <form class="tab"> 
                <label for="name">Your name:</label> 
                <input type="text" name="name"  class="name" /><br /> 
                <label for="email">Your email:</label> 
                <input type="text" name="email" class="email" /><br /> 
                <label for="comments">Your message:</label> 
                <textarea name="message" class="message"></textarea><br /> 
                <label for="contact">&nbsp;</label> 
                <a href='#contact' class='submit'>Send!</a><br /> 
                </form>  
</div>

CSS

form.tab {
    margin-top: 20px;
    margin-left: 10px;
}

form.tab label {
    display: block;
    float: left;
    font-weight: bold;
    padding: 9px 0;
    width: 130px;
}

form.tab .text {
    border: 1px solid #000000;
    float: left;
    font-size: 15px;
    margin-bottom: 10px;
    padding: 10px;
    width: 300px;
}
form.tab .name {
    border: 1px solid #000000;
    float: left;
    font-size: 15px;
    margin-bottom: 10px;
    padding: 10px;
    width: 300px;
}
form.tab .email {
    border: 1px solid #000000;
    float: left;
    font-size: 15px;
    margin-bottom: 10px;
    padding: 10px;
    width: 300px;
}

form.tab .textarea {
    border: 1px solid #000000;
    float: left;
    font-size: 12px;
    height: 70px;
    margin-bottom: 10px;
    padding: 10px;
    width: 400px;
}
form.tab .message {
    border: 1px solid #000000;
    float: left;
    font-size: 12px;
    height: 70px;
    margin-bottom: 10px;
    padding: 10px;
    width: 400px;
}

form.tab br {
    clear: left;
}
.indent{
margin-left: 10px;
}

JavaScript

$('a.submit').event('click', function(e){
    
   var name = $('div.contact input.name').attribute().value;
    var email = $('div.contact input.email').attribute().value;
    var message = $('div.contact input.message').attribute().value;
    alert('Name:' + name);
    
});//