JSFiddle - React, Tailwind, and code Playground

by akang2

HTML

<html>
<header>
    <img src="https://edit.fogbugz.com/default.asp?pg=pgDownload&pgType=pgFile&ixBugEvent=1334&ixAttachment=95&sTicket=&sFileName=mont-logo.png" />
    <div>
        <h1>The United States</h1>
        <h2>National Grant Organization</h2>
<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Longer Item</a></li>
        <li><a href="#">Reports</a></li>
        <li><a href="#">Staff</a></li>
        <li><a href="#">Grants</a></li>
    </ul>
</nav>
    </div>
</header>

<section>
    <article>

<h1>Grant Generator</h1>

<h2>Preview Page Creation:</h2>
        
        <ul>
            <li><a href="#">Staff</a></li>
            <li><a href="#">members</a></li>
            <li><a href="#">third member</a></li>
            <li><a href="#">wooow</a></li>
            <li><a href="#"># 5</a></li>
        </ul>

<fieldset>
<p>
    <label for="id_text">Sample Label:</label>
    <input id="id_text" type="text" class="textInput" value="bleh">
</p>

<button type="button" name="" value="" class="css3button">Next</button>
</fieldset>
    </article>
</section>
</html>

CSS

body {
    font-family: helvetica, arial, sans-serif;
    color: #646464;
    font-size: 12px;
    background: url('http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/light_noise_diagonal.png') repeat;
}

header {
    height: 200px;
    width: 900px;
    margin: 0px auto;
}
    
header img {
    padding: 0px;
    float: left;
}

header div {
    margin-left: 0px;
}

header div h1 {
    font-size: 30px;
    vertical-align: 150px;
    font-family: times new roman, georgia, serif;
    font-style: italic;
    color: #f29324;
    padding-top: 30px;
}

header div h2 {
    font-size: 40px;
    vertical-align: 110px;
    font-variant: small-caps;
    margin: 0px;
    letter-spacing: -1px;
}

nav {
    /*width: 900px;*/
    height: 37px;
    padding: 6px 6px 6px 45px;
    margin: 5px 0 0 85px;
    background: #eeeeee;
    border: 1px solid #b3b6b9;
}

nav ul {
    background: #f6f6f6;
    border: 1px solid #ddd;
    height: 37px;
}

nav li {
    float: left;
    height: 37px;
    border-right: 1px solid #ddd;
}

nav li a {
    display: block;
    float: left;
    height: 37px;
    font-weight: bold;
    line-height: 37px;
    text-decoration: none;
    color: #646464;
    padding: 0 20px;
    text-transform: uppercase;
}

nav li a:hover {
    background: #fdfcf6;
}

nav li a.active {
    background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 70%, #e5e5e5 95%, #e5e5e5);
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(0.70, #f6f6f6), color-stop(0.95, #e5e5e5), to(#e5e5e5));
    color: #454545;
}

section {
    width: 900px;
    background: #eeeeee;
    border: 1px solid #b3b6b9;
    margin: 0px auto;
}    

article {
    background: #f6f6f6;
    border: 1px solid #ddd;
    margin: 5px;
}

article h1 {
    font-size: 240%;
    border-bottom: 1px solid #ddd;
    margin: 10px 0 0 10px;
}

article h2 {
    font-size: 150%;
    margin: 10px 0 9px 15px;
    color: #f29324;
}

article ul {
    list-style-type: none;
   ...

JavaScript

//montagable final css stuff
//different fork for Derek's suggestion of putting the extra div