JSFiddle - React, Tailwind, and code Playground

Form Style for new jp.com??

by Jennifer Perrin

HTML

<form action="" method="post" id="contactform">

<p><label for="contactname"><small>Your Name</small></label><br>
    <input name="name" id="contactname" value="" type="text"></p>

<p><label for="contactemail"><small>Email Address</small></label><br>
    <input name="email" id="contactemail" value="" type="text"></p>

<p><label for="contactmessage"><small>Message</small></label><br>
<textarea name="message" id="contactmessage" cols="58" rows="10"></textarea></p>

    <p><input name="submit" id="contactsubmit" value="Send Message" type="submit"></p>

</form>

CSS

body { margin: 10px; }

#contactform {
    margin: 20px 0;
}
#contactform p {
    font-family: 'Lucida Grande',Verdana,Arial,sans-serif;
    padding: 4px 0;
}
#contactform p small {
    color: #999999;
    font-size: 11px;
}
#contactform input, #contactform textarea {
    background-color: #F9F9F9;
    border: 1px solid #CCCCCC;
    color: #333333;
    font-size: 14px;
}
#contactform input:focus, #contactform textarea:focus {
    background-color: #FFFFFF;
}
#contactform input, #contactform textarea {
    margin: 4px 0 0;
    padding: 5px;
    width: 95%;
}
#contactform #contactsubmit {
    background-color: #F0F0F0;
    border: 1px solid #CCCCCC;
    color: #333333;
    cursor: pointer;
    font-size: 12px;
    padding: 4px 16px;
    text-transform: uppercase;
    width: auto;
}
#contactform #contactsubmit:hover, #contactform #contactsubmit:active {
    background-color: #F9F9F9;
    border-color: #CFCFCF;
    color: #000000;
}