JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
    <title>Custom Studio: Website Development Area</title>
</head>
<body>

    <div class="header-wide">
        <div class="header">
            <a href="http://www.customstudio.co.uk/">
                <div class="logo"></div><!-- /end #logo -->
            </a>
            <div id="menu"> 
                <ul id="item1"> 
                    <li class="top">Branding</li> 
                    <li class="item"><a href="#">Brief</a></li> 
                    <li class="item"><a href="#">Visuals</a></li> 
                </ul>
                <ul id="item2"> 
                    <li class="top">Website</li> 
                    <li class="item"><a href="#">Specification</a></li> 
                    <li class="item"><a href="#">Sitemap</a></li> 
                    <li class="item"><a href="#">Wireframe</a></li> 
                </ul>
                <ul id="item3"> 
                    <li class="top">Tools</li> 
                    <li class="item"><a href="#">Notes</a></li> 
                </ul>
                <ul id="help"> 
                    <li><a href="mailto:[email protected]?subject=I have a question about my website development area
                    &body=Simply type your question here:">Help</a></li> 
                </ul>
            </div><!-- /end #menu -->
        </div><!-- /end #header -->
    </div><!-- /end #header-wide -->
    <div class="breadcrumb-wide">
        <div class="breadcrumb">
            <h2 class="bread">You are here: <em>Home</em></h2>
    </div><!-- /end #breadcrumb-wide -->    
    <div class="content">
        <h1 class="first">Welcome to your website development area.</h1>
            <h1>To see the progress of your website, simply click on one of the links in the top right-hand corner.</h1>
            <h1>If you have any questions, simply <a...

CSS

@import url(reset.css);

body {
    font: 13px Helvetica, Arial, Geneva, sans-serif;
}

.header-wide {
    position: relative;
    height: 60px;
    background: url(images/header-background.png) repeat-x;
}

.header {
    position: relative;
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    line-height: 60px;
}

.logo {
    float: left;
    width: 183px;
    height: 23px;
    background: url(images/logo2.png) no-repeat;
    margin-top: 17px;
}

li {
    display: inline;
    list-style: none;
    color: #666;
}

a {
    text-decoration: none;
    color: #cccc99;
}

a:hover {
    color: white;
    border-bottom:1px dotted white;
}

.content {
    position: relative;
    overflow: hidden;
    clear: both;
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 30px;
}

.content-wireframe {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.content h1 {
    width: 400px;
    margin-top: 20px;
    color: #999;
    font: 18px Helvetica, Arial, Geneva, sans-serif;
    line-height: 26px;
}

.content .first {
    margin-top: 30px;
    font-size: 32px;
    font-weight: bold;
    line-height: 40px;    
    color: #cccc99;
}

.content a {
    text-decoration: none;
    color: #666;
    border-bottom:1px dotted #666;
}

.content a:hover {
    color: #cccc99;
    border-bottom:1px dotted #cccc99;
}

.breadcrumb-wide {
    position: relative;
    height: 30px;
    width: 100%;
    background: #dfdfdf; /* for non-css3 browsers */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdfdfd', endColorstr='#dfdfdf'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#dfdfdf)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #fdfdfd,  #dfdfdf); /* for firefox 3.6+ */    
}

.breadcrumb {
    position: relative;
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    top: 8px;
}

.breadcrumb h2 {
    line-height: 30px;
   ...