JSFiddle - React, Tailwind, and code Playground

Form Styles for clientResponse

by Jennifer Perrin

HTML

<link href='http://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css'>

<form>
                <div class="field">
                    <label for="fullname">Full Name:</label>
                    <input name="fullname" id="fullname" type="text" value="">
                </div>
                <div class="field">
                    <label for="service">Project Name:</label>
                    <input name="service" id="service" type="text" value="">
                </div>
                <div class="field">
                    <label for="status">Project Status:</label>
                    <input name="status" id="status" type="text" value="">
                </div>
                <div class="field">
                    <label for="price">Project Fee:</label>
                    <input name="price" id="price" type="text" value="">
                </div>
                <div class="field">
                    <label for="project_start">Project Start:</label>
                    <input name="project_start" id="project_start" type="text" value="">
                </div>
                <div class="field">
                    <label for="project_due">Project Due:</label>
                    <input name="project_due" id="project_due" type="text" value="">
                </div>
                <div class="area">
                    <label for="notes">Project Notes:</label>
                    <textarea id="notes" name="notes"></textarea>
                </div>
                <div class="area">
                    <label for="internal_notes">Private Notes:</label>
                    <textarea id="internal_notes" name="internal_notes"></textarea>
                </div>

            </form>

CSS

body {
    background: url("http://jenniferperrin.com/clients/images/body-bg.gif") repeat scroll 0 0 transparent;
    margin: 20px;
    padding: 0;
    color: #444;
}

div.field {
    height: 39px;
}
div.field {
    border-bottom: 1px solid #ccc;
    clear: both;
    position: relative;
}
div.area {
    clear: both;
    border-top: 1px solid #ccc;
    margin-top: 6px;
    margin-bottom: 10px;
    position: relative;
}

div.field label {
    background-position: 3px 14px;
    border-right: 1px solid #ccc;
    float: left;
    height: 39px;
    line-height: 39px;
    width: 120px;
}
div.area label {
    background-position: 3px 14px;
    border-right: 1px solid #ccc;
    float: left;
    height: 100px;
    width: 120px;
    padding-top: 10px;
}

label {
    color: #444;
    font: 13px 'Cuprum', Arial, Helvetica, sans-serif;
    letter-spacing: 1px;
    line-height: 20px;
    padding-left: 10px;
    text-transform: uppercase;
}
input[type="button"], input[type="submit"], input[type="image"], button {
    cursor: pointer;
}

div.field input {
    border: 0 none;
    padding: 10px 6px;
    width: 50%;
}
div.area textarea {
    border: 0 none;
    padding: 0 6px;
    width: 50%;
    height: 100px;
}
input, textarea, select {
    background: none repeat scroll 0 0 transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 2px 2px 2px 2px;
    color: #222;
    font: 14px Arial, Helvetica, sans-serif;
    outline: medium none;
    padding: 3px 5px;
}
button, input, select, textarea {
    margin: 0;
}