JSFiddle - React, Tailwind, and code Playground

by tobeeornot

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset='UTF-8' />
    
    <title>Media Five</title>
    
    <link rel='stylesheet' href='css/style.css' />
    <link rel="stylesheet" type="text/css" href="css/nav.css">
    <!--[if lte IE 7]>
        <link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
    <![endif]-->
<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>    
    <script type="text/javascript" language="javascript" src="js/jquery.dropdownPlain.js"></script>
</head>            

<body>

    <div id="wrapper" class="group">
        
        <header>
            <a href="#" id="home-link">Home</a>
    
                <!--<p>01923225369
    
                [email protected]</p>-->
                
                 <nav id="main-navigation">
        <ul class="dropdown">
            <li><a href="#">Digital Printing<span></span></a>
                <ul class="sub_menu">
                     <li><a href="#">Bureau Services</a></li>
                     <li><a href="#">Variable Data</a></li>
                     <li><a href="#">Communication Devices</a></li>
                     <li><a href="#">Karge Format</a></li>
                </ul>
            </li>
            <li><a href="#">Email & SMS Broadcasting</a>
                <ul class="sub_menu">
                    <li><a href="#">Data List Management</a></li>
                    <li><a href="#">Campaign Planning</a></li>
                     <li><a href="#">Email Build</a></li>
                     <li><a href="#">Broadcast</a></li>
                     <li><a href="#">Track & learn</a></li>
                </ul>
            </li>
            <li><a href="#">Mailing & Fulfilment</a>
                <ul class="sub_menu">
                     <li><a href="#">Direct Mail</a></li>
                    <li><a href="#">Fulfilment</a></li>
                     <li><a href="#">Postal Services</a></li>
                </ul>
            </li>
            <li><a...

CSS

* { 
    margin: 0; 
    padding: 0; 
}

html {
    background:black url(../images/bg.jpg);
} 
body { 
    font: normal 62.5%/1.4  Georgia, "Times New Roman", Times, serif;
} 

/*CLEAR-FIX HACK*/
.group:after {
        visibility: hidden;
        display: block;
        content: "";
        clear: both;
        height: 0;
}

.group {
    display:inline-block;
    clear:both;
}
 html .group{height: 1%;}
.group {display:block} 
/*CLEAR-FIX HACK END*/
/*need to apply class .group to "wrapper"*/

article, aside, figure, footer, header, nav, section { 
    display: block; 
} 

.button { 
    background-image: -moz-linear-gradient(top, #6b7886, #3b4f63); 
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #6b7886),color-stop(1, #3b4f63)); 
    padding: 5px 15px; 
    color: white; 
    font-size: 1.2em;
    font-weight: normal !important;
    text-decoration: none; 
    text-transform: uppercase; 
    border: 2px solid white !important; 
    -moz-box-shadow: 1px 1px 3px #666; 
    -webkit-box-shadow: 1px 1px 3px #666; 
    box-shadow: 1px 1px 3px #666;
}
.button:hover { 
    background-image: none; 
    background-color: #6b7886; 
    -moz-box-shadow: 0px 0px 2px #999; 
    -webkit-box-shadow: 0px 0px 2px #999; 
    box-shadow: 0px 0px 2px #999; 
    text-decoration: none !important; 
}


 
#wrapper {
    width:800px;
    margin:30px auto 10px;
    background: white;
}

header {     position: relative;
    margin: 0;
    padding: 0;
    height: 100%;
    background: url(../images/logo.png) no-repeat left top;
    width: 800px;
    height: 102px;
}


header p {
    position: absolute;
    font-size: 1.4em;
    text-transform:uppercase;
    left: 550px;
    top: 50px;
    display: block;
}

h2 {
    color: #000;
    text-transform: uppercase;
    text-shadow: 2px 2px 0 #d8d8dc; 
    font-weight: normal;
    font-size: 2.6em;
    margin: 50px 0 12px 0;
    letter-spacing: 5px;
}

#home-link {
    position:absolute;
    width: 314px; 
   ...