JSFiddle - React, Tailwind, and code Playground

by Alan Mehio

HTML

<body id="contact">
        <header>
            <a href="index.html"><img src="images/logo.png" alt="Signwrite Signs &amp; Designs Logo" /></a>
            <nav>
                <ul>
                    <li><a href="contact.html">Contact Us</a></li>
                    <li><a href="services.html">What We Do</a></li>
                    <li><a href="about.html">About Us</a></li>
                    <li><a href="index.html">Home</a></li>
                </ul>
            </nav>
        </header>
        <section id="content">
            <article>
                <h1>Contact Us</h1>
                <div>
                    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3173.5474529375374!2d144.9503499999996!3d-37.30585800436599!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad7a4a8a3379d23%3A0x9d76c4464bec770c!2s106B+Powlett+St%2C+Kilmore+VIC+3764!5e0!3m2!1sen!2sau!4v1429341803861" width="100%" frameborder="0" style="border:0">&nbsp;</iframe>
                </div>
                <form method="POST" id="contact-form"> 
                    <div>
                        Full name<br>
                        <input type="text" name="fullname" value="" placeholder="Enter your full name here">
                    </div>
                    <div>
                        Email<br>
                        <input type="email" name="email" value="" placeholder="Enter your email here">
                    </div>
                    <div>
                        Query<br>
                        <textarea></textarea>
                    </div>
                    <div>
                        <button>Submit</button>
                    </div>
                </form>
            </article>
        </section>
        <footer>
            &copy; Signwrite Signs &amp; Designs 2015.
        </footer>
    </body>

CSS

/* http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp */
@font-face {
    font-family: Frutiger;
    src: url(frutiger.otf);
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin: 0 0 50px 0;
    background-color: black;
    background-size: cover;
    background-repeat: no-repeat;
}

body#home { background-image: url(images/backgrounds/home-large.jpg); }
body#about { background-image: url(images/backgrounds/about-large.jpg); }
body#contact { background-image: url(images/backgrounds/contact-large.jpg); }

/* http://www.w3schools.com/cssref/css3_pr_mediaquery.asp */
@media screen and (max-width: 300px) {
    body#home { background-image: url(images/backgrounds/home-small.jpg); }
    body#about { background-image: url(images/backgrounds/about-small.jpg); }
    body#contact { background-image: url(images/backgrounds/contact-small.jpg); }
}

@media screen and (max-width: 1024px) {
    body#home { background-image: url(images/backgrounds/home-medium.jpg); }
    body#about { background-image: url(images/backgrounds/about-medium.jpg); }
    body#contact { background-image: url(images/backgrounds/contact-medium.jpg); }
}

header {
    height: 100px;
    background: -webkit-linear-gradient(rgba(20, 157, 234, 0.5), rgba(23, 10, 81, 0.5)); /*Safari 5.1-6*/
    background: -o-linear-gradient(rgba(20, 157, 234, 0.5), rgba(23, 10, 81, 0.5)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(rgba(20, 157, 234, 0.5), rgba(23, 10, 81, 0.5)); /*Fx 3.6-15*/
    background: linear-gradient(rgba(20, 157, 234, 0.5), rgba(23, 10, 81, 0.5)); /*Standard*/
}

header img {
    height: 100px;
}

nav {
    float: right;
}

nav ul {
    margin: 0px;
}

nav li {
    float: right;
    display: block;
    text-align: center;
}

nav li a {
    font-family: Frutiger;
    display: inline-block;
    line-height: 100px;
    vertical-align: middle;
    height: 100px;
    width: 150px;
    color: white;
    text-decoration: none;
}

nav li a:hover {
   ...