JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Bhatkalnews!</title>
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <link rel="stylesheet" type="text/css" href="css/style.css" title="style" media="screen" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    </head>
    <body>
        <div id="header">
            <div id="topmenu">
                <div id="logo">
                    <a href="#"><img src="img/logo-left.png" alt="BhatkalNews" /></a>
                </div>
                
                <div id="navigation">
                    <ul>
                        <li class="contact"><div class="background"></div> <a href="#"><img src="img/contact.png"/></a></li>
                        <li class="photo"><a href="#"><img src="img/photo.png"/></a></li>
                        <li class="video active"><a href="#"><img src="img/video.png"/></a></li>
                    </ul>
                </div>
                
                <div id="urdulogo">
                    <a href="#"><img src="img/logo-right.png" alt="BhatkalNews" /></a>
                </div>
            </div>
        </div>
        <!-- start container -->
        <div id="container">
            
            <!-- start - sponsor-bar -->
            <div id="top-bar">
                <div id="bottom-logo">
                    <img src="img/urdu-logo.png" alt="BhatkalNews" />
                </div>
                <div id="top-bar-1">
                </div>
                <div id="divider"></div>
                <div id="top-bar-2">
                </div>
            </div>
            <!-- end - sponsor-bar -->
            
            
            <!-- start -...

CSS

@charset "utf-8";
/* CSS Document */

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; border: 0;}
html{
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    color:#222;
    line-height:20px;
}
ol, ul {
    list-style: none;
}
img, fieldset
{
    border:0;
}
a, 
a:visited, 
a:active{
    color:#333333;
    text-decoration:none;
}
a:hover  
{  
    text-decoration:none;
}
a:focus{
    outline:none;
}
.right {
    float: right;
}
input, 
textarea{
    outline:none;/* preventing the chrome and safari nasty yellow border */    
}
body {
    background:#36240A url('../img/bg-pattern.gif') repeat;
}
/* container */
div#container{
    width:1040px;
    margin:0 auto!important;
    position:relative;
}

/* header */
div#header {
    height:110px;
    background: url('../img/header-bg.jpg') repeat-x;
}
/* top-menu */
div#topmenu {
    width:940px;
    margin:0 auto!important;
}
div#logo {
    float:left;
    width:289px;
    padding: 30px 5px 20px 0;
}
div#urdulogo {
    float:left;
    width:195px;
    padding: 18px 0px 0px 5px;
    background: url('../img/header-div.jpg') repeat-y;
}

/*navigation */
div#navigation {
    width:446px;
    float:left;    
}
#navigation li {
    background: url('../img/header-div.jpg') repeat-y;
    float:left;
    width:148px;
    height:109px;
}

#navigation li.active {    
}
#navigation li.contact img {
    margin:35px;
}

#navigation li.contact a:hover {
    margin-left:1px;
    background: url('../img/hover.jpg') no-repeat;
    float:left;
    width:147px;
    height:109px;
}

#navigation li.photo img {
    margin:35px 0 0 45px;
}

#navigation li.photo a:hover {
    margin-left:1px;
    background: url('../img/hover.jpg') no-repeat;
    float:left;
    width:147px;
    height:109px;
}

#navigation li.video img {
    margin:35px 0 0 40px;
}

#navigation li.video a:hover{
    margin-left:2px;
    background:...