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-nav">
                            <a href="#">
                                <span class="title">Business</span><br />
                                <span class="pagetitle">Business & Enterprise</span>
                            </a>
                        </li>
                        <li id="education-nav">
                            <a href="#">
                                <span class="title">Education</span><br />
                                <span class="pagetitle">Education for all</span>
                            </a>
                        </li>
                        <li id="participation-nav">
                            <a href="#">
                                <span class="title">Participation</span><br />
                                <span class="pagetitle">Passionate Participation</span>
                            </a>
                        </li>
                        <li id="health-nav">
                            <a href="#">
                                <span class="title">Health</span><br />
                                <span class="pagetitle">Health & Wellbeing</span>
                            </a>
                        </li>
                        <li id="events-nav">
                            <a href="#">
                                <span class="title">Events</span><br />
                                <span class="pagetitle">What's going on</span>
                            </a>
                        </li>
                        <li...

CSS

@import url(reset.css);

body {
    background-color: white;
}

/* float clearing for IE6 */
* html #container {
  height: 1%;
  overflow: visible;
}

/* float clearing for IE7 */
*+html #container {
  min-height: 1%;
}

/* float clearing for everyone else */
#container:after {
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

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

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

#navigation-wide {
    position: relative;
    width: 100%;
    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), to(#343434)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #666,  #343434); /* for firefox 3.6+ */    
}

#navigation li{
    position: relative;
    display: inline;
    float: left;
    height: 60px;
    list-style-type: none;
    color: white;
}

#navigation a {
    position: relative;
    display: block;
    height: 60px;
    border-left: 1px solid #666;
    border-right: 1px solid #666;;
    padding: 15px 18px 0 18px;
}

#navigation a:hover{
    color: #ec0181;
    background-color: #333;    
}

#navigation .title {
    font-size: 20px;
    font-weight: normal;
    font-style: normal;
}

#navigation .pagetitle{
    font-size: 15px;
    color:...