JSFiddle - React, Tailwind, and code Playground

by Chris LaFrombois

HTML

<div id="content">
    <div id="content-top">
        <div id="logotype-banner"></div>
        <div id="banner"></div>
        <div id="linkbar">
                <div id="element-linkbar">
                      <a href="index.htm">Start</a>
               </div>
                <div id="element-linkbar">
                     <a href="gymnasiekurser/gymnasiekurser.html">Gymnasiekurser</a>
                </div>

                 <div id="element-linkbar">
                     <a href="språkkurser-vuxna/språkkurser-vuxna.html">Språkkurser vuxna</a>
                </div>

                <div id="element-linkbar">
                      <a href="språkkurser-företag/språkkurser-företag.html">Språkkurser företag</a>
                </div>

                <div id="element-linkbar">
                       <a href="lärare/lärare.html">Lärare</a>
                 </div>

                 <div id="element-linkbar">
                        <a href="omoss/omoss.html">Om oss</a>
                 </div>
            </div><!-- #linkbar -->
    </div><!-- #content-top-->
    <div id="content-bot">
        <div id="left-column"></div><!-- left -->
        <div id="center-column"></div><!-- center -->
        <div id="right-column"></div> <!-- right -->
    </div><!-- #content-bot-->
</div><!-- #content -->

CSS

a:link {
    text-decoration: none;
    color:#FFFFFF;
}
a:visited {
    text-decoration: none;
    color:#FFFFFF;
}
a:hover {
    background-color: #8FF0F1;
    text-decoration: none;
    color: #000000;
}
a:active {
    background-color: #8FF0F1;
    text-decoration: none;
    color: #000000;
}
body {
    background-color: #DADCDC;
    font-family:Verdana, Arial, sans-serif;
    font-size: small;
    color:#444444;
    min-width: 1200px;
    margin:0;
}
#content {
    position: relative;
    background-color: #FFFFFF;
    width: 1000px;
    margin:0 auto;
}
#content-top {
    position: relative;
    width: 1000px;
    height: 140px;
}
#logotype-banner {
    position: relative;
    float: left;
    width: 500px;
    height: 100px;
    background: url(../images/logotype1.jpg) #FF0 no-repeat 0 0;
}
#banner {
    position: relative;
    float: right;
    width: 500px;
    height: 100px;
    background: url(../images/banner1.gif) #CC0 repeat-x 0 0;
}
#linkbar {
    position: relative;
    clear: both;
    width: 1000px;
    height: 40px;
}
#element-linkbar {
    position: relative;
    display: block;
    float: left;
    width: 16.66666666666666666666666666666666666666666666666666666666666666666666%;
    height: 40px;
    background: url(../images/linkbar1.gif) #000 repeat-x 0 0;
    text-align: center;
    line-height: 3;
}
#element-linkbar a {
    display:block;
    height:100%;
    width:100%;
}
#content-bot {
    position: relative;
    width: 1000px;
    min-height: 1800px;
}
#left-column {
    position: relative;
    width: 200px;
    float:left;
    background-color:red;
    height:400px;
}
#greybar-left-column {
    position: relative;
    width: 180px;
    height: 1px;
    top: 40px;
    left: 13px;
    background-image: url(../images/greypixel1.gif);
    background-image: repeat-x;
}
#center-column {
    position: relative;
    width: 600px;
    background-color:blue;
    float:left;
    height:400px;
}
#greybar-center-column {
    position: relative;
   ...