JSFiddle - React, Tailwind, and code Playground

by tomperkins

HTML

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <title>Andover Vision</title>
    </head>
    <body>
        <div class="main">
            <div class="header-wide">
                <div class="header">
                </div><!-- /end #header -->
                <div id="navigation-wide">
                    <div id="navigation">
                        <ul>
                            <li id="business">
                                <a href="index.html">
                                    <span class="title">Business</span><br />
                                    <span class="pagetitle">Business & Enterprise</span>
                                    </a>
                                    </li>
                                        <li id="education">
                                            <a href="index.html">
                                                <span class="title">Education</span><br />
                                                <span class="pagetitle">Education for all</span>
                                            </a>
                                        </li>
                                        <li id="participation">
                                            <a href="index.html">
                                                <span class="title">Participation</span><br />
                                                <span class="pagetitle">Passionate Participation</span>
                                            </a>
                                        </li>
                                        <li id="health">
                                            <a href="index.html">
                                                <span class="title">Health</span><br />
                                                <span class="pagetitle">Health & Wellbeing</span>
                                      ...

CSS

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    background-color: #f1f3f2;
}

.main {
    overflow:auto;
    padding-bottom: 150px;
}

a {
    color: white;
    text-decoration: none;
}

#navigation-wide {
    position: relative;
    width: 1024px;
    height: 75px;
    margin: auto;
    top: 132px;
    background: #666; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666', endColorstr='#343434'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#343434)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #666,  #343434); /* for firefox 3.6+ */    
}

#navigation {
    height: 75px;
    width: 1024px;
    margin: auto;
    line-height: 23px;
    background: #666; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666', endColorstr='#343434'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#666),...