JSFiddle - React, Tailwind, and code Playground

by staeff

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <title>Web Form</title>
        <link href='http://fonts.googleapis.com/css?family=Lobster'
        rel='stylesheet' type='text/css'>
    </head>
    
    <body>
        <div id="header">
            <h1>Contact Us!</h1>
        </div>
        <div id="wrapper">
            <div id="inputs">
                <form name="input" action="#" method="post">First name:
                    <input type="text" name="firstname" value="first name">
                    <br/>Last name:
                    <input type="text" name="lastname" value="last name">
                    <br/>E-mail:
                    <input type="email" name="email" value="e-mail address">
                    <br/>
                    <br/>
                </form>
            </div>
            <div>
                <form id="options">Message:
                    <br/>
                    <textarea name="msg"></textarea>
                    <br/>
                    <p>Sex:</p>
                    <input type="radio" name="sex" value="male">Male
                    <input type="radio" name="sex" value="female">Female
                    <br/>
                    <br/>
                    <input type="checkbox" name="notify" value="updates" checked>I'd like to receive notices when this website updates.
                    <br/>
                    <input type="checkbox" name="notify" value="services">I'd like to receive notices pertaining to related websites and their services.
                    <br/>
                    <br/>
                    <input type="submit" value="Submit">
                </form>
            </div>
        </div>
    </body>

</html>

CSS

#header {
    position: relative;
    top: -10px;
    background-color: #00A0B0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    height: 40px;
}
h1 {
    font-family: Lobster;
    color: #FFFFFF;
    text-align: center;
}
form {
    font-family: Verdana, Arial, sans-serif;
}
p {
    font-family: Verdana, Arial, sans-serif;
    display: inline-block;
}
input {
    font-family: Verdana, Arial, sans-serif;
    color: #777;
}
textarea {
    vertical-align: top;
    width: 400px;
    color: #777;
}
#wrapper {
    border-left: 1px solid #888;
    border-right: 1px solid #888;
    border-bottom: 1px solid #888;
    position: relative;
    top: -10px;
    padding-top: 10px;
    padding-left: 20px;
    padding-bottom: 20px;
    box-shadow: 3px 3px 3px #444;
    font-family: Verdana, Arial, sans-serif;
    font-size: 0.8em;
}
#inputs {
    width: 200px;
    clear: both;
}
#inputs input {
    width: 100%;
    clear: both;
}

JavaScript

// Web Form using nice googlefont Lobster in Headline