JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <script language="javascript">
            if (top.location == self.location) 
            {
                top.location = 'index.html'
            }
        </script>
        <link href="styles.css" rel="stylesheet" type="text/css">
    </head>
    <body class="body_pages">
        <p class="page_title">Contact Form</p>
        <p>Please fill out the form including your name, email address, subject, and the message/comment you like to contact me about. When you submit the message, this form will launch your default email client installed on your computer.</p>
        <br>
        <div style="padding-left: 50px">
            <fieldset>
                <legend>Contact Form</legend>
                <form action="mailto:csharpprojects@gmail.com" method="post" enctype="text/plain">
                    Your Name:<br><input type="text" name="name" size="50"><br><br>
                    Your Email Address:<br><input type="text" name="email" size="50"><br><br>
                    State Your Subject:<br><input type="text" name="subject" size="50"><br><br>
                    Message:<br>
                    <textarea name="message" cols="50" wrap="virtual" rows="10"></textarea><br><br>
                    <input type="submit" name="submit" value="Submit">
                    <input type="reset" name="reset" value="Reset">
                </form>
                <br>
        </fieldset>
        </div>
        <p class="go_back"><a href="contact.html" target="_self">Go Back.</a></p>
        <p class="last_modified">Last modified on <!-- #BeginDate format:Am1 -->February 25, 2012<!-- #EndDate --></p>
        <div class="footer">Copyright &#169; 2012 CSharp Projects</div>
    </body>
</html>

CSS

body
{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px
}

fieldset
{
    padding: 10px;
    width: 425px;
    border: 1px solid #4169E1
}

legend
{
    text-decoration: bold;
    color: #4169E1
}

p
{
    margin: 0px;
    padding-bottom: 10px;
}

a:link, a:visited
{
    text-decoration: none;
    color: #191970
}

a:hover
{
    text-decoration: underline;
}

li {
    list-style-type: none;
    margin-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px
}

.footer
{
    width: 100%;
    position: absolute;
    bottom: 0;
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center
}

.unknown_page
{
    text-decoration: bold;
    font-size: 16px
}
.menu_bottom
{
    padding-top: 5px
}

.menu_top
{
    padding-bottom: 15px
}

.body_pages
{
    min-width: 300px;
    margin: 15px
}

.logo_background
{
    background-color: #E8E8E8;
    width: 100%;
    height: 100%;
    min-width:710px
}

.menu_background
{
    background-color: #E8E8E8;
    width: 100%;
    height: 100%
}

.li_page
{
    list-style-type: circle;
    border: 0px
}

.li_menu
{
    text-decoration: bold
}

.page_title
{
    color: #4169E1;
    clear: left;
    font-weight: bold;
    padding-bottom: 20px;
    font-size: 16px
}

.go_back
{
    padding-top: 20px;
    clear: left;
    font-weight: bold
}

.last_modified
{
    padding-top: 20px;
    clear: left
}

.img
{
    float: left;
    margin: 10px;
    border: 2px solid #191970
}

.img2
{
    float: left;
    margin: 10px
}

.div_content
{
    clear: left
}

#address
{
    margin-left: 20px; 
    font-style: italic
}