JSFiddle - React, Tailwind, and code Playground

by wesley_murch

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>

    <title>Home | CHIF</title>
    <link href="Home%20_%20CHIF_files/1304604475.css" media="screen" rel="stylesheet" type="text/css" />

</head>

<body>


         <div id="nav" class="clear">
          <div class="inner">
              

  
<ul class="nav">
    <li><a href="#page/about">About CHIF</a>
        <ul>
            <li class=""><a href="#page/about">Who We Are</a></li>
            <li class=""><a href="#page/annual-reports">Annual Reports</a></li>
            <li class=""><a href="#page/board-of-directors">Board of Directors</a></li>
            <li class=""><a href="#page/staff">Staff</a></li>
        </ul>
    </li>
    <li><a href="#page/about">About CHIF</a>
        <ul>
            <li class=""><a href="#page/about">Who We Are</a></li>
            <li class=""><a href="#page/annual-reports">Annual Reports</a></li>
            <li class=""><a href="#page/board-of-directors">Board of Directors</a></li>
            <li class=""><a href="#page/staff">Staff</a></li>
        </ul>
    </li>
    <li><a href="#page/contact-us">Contact Us</a>
        <ul>
            <li class=""><a href="#page/directions">Directions</a></li>
            <li class=""><a href="#page/employment">Employment</a></li>
        </ul>
    </li>
    <li><a href="#page/about">About CHIF</a>
        <ul>
            <li class=""><a href="#page/about">Who We Are</a></li>
            <li class=""><a href="#page/annual-reports">Annual Reports</a></li>
            <li class=""><a href="#page/board-of-directors">Board of Directors</a></li>
            <li class=""><a href="#page/staff">Staff</a></li>
        </ul>
    </li>    <li><a href="#page/about">About CHIF</a>
        <ul>
            <li class=""><a href="#page/about">Who We Are</a></li>
            <li class=""><a href="#page/annual-reports">Annual Reports</a></li>
            <li class=""><a...

CSS

html {
    border:0;
    margin:0;
    padding:0;
}

body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,img,q,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
    border:0;
    font-family:inherit;
    font-size:100%;
    font-style:inherit;
    font-weight:inherit;
    margin:0;
    padding:0;
    vertical-align:baseline;
}
.clear:after {
    visibility:hidden;
    display:block;
    font-size:0;
    content:" ";
    clear:both;
    height:0;
}
.clear {
    display:inline-block;
}
/* Hides from IE-mac \*/
* html .clear {
    height:1%;
}
.clear {
    display:block;
}
a img {
    border:none;
}

body {
    background:#5da283;
    color:#222;
    font-family:Georgia;
}

.inner {
    margin:0 auto;
    position:relative;
    width:600px;
}

#header {
    background:#fff;
}

#header .inner {
    padding:10px 0;
}

#header .logo {
    float:left;
    margin:-30px 20px 0 0;
}

#header .heading {
    float:left;
    width:520px;
}

#header .contact-info {
    color:#777;
    font-size:88%;
    line-height:1.6;
    position:absolute;
    right:10px;
    text-align:right;
    top:10px;
}

#header h1 {
    color:#444;
    font:46px Georgia;
    margin:0 0 10px;
}

#header h5 {
    color:#666;
    font-size:14px;
    font-style:italic;
}

.nav,.nav li,.nav ul {
    list-style:none;
    margin:0;
    padding:0;
}

.nav {
    float:left;
}

.nav ul {
    background:#408676;
    padding:8px 0;
    position:absolute;
    top:100%;
    visibility:hidden;
    width:200px;
    z-index:598;
}

.nav ul ul {
    background-color:#336c5f;
    border:0;
    border-radius:8px;
    left:100%;
    margin-left:-2em;
    top:-65%;
}

.nav ul li {
    float:none;
}

.nav li {
    float:left;
    position:relative;
    zoom:1;
}

.nav li:hover {
    cursor:default;
    z-index:599;
}

.nav li:hover > ul,.nav a:hover + ul,.nav a:focus + ul {
    visibility:visible;
}

.nav a {
    color:#fff;
   ...