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="" />
<!--[if !IE 6]><!--><link rel="stylesheet" type="text/css" href="css/style.css" title="style" media="screen" /><!--<![endif]-->
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="css/ie6-style.css" title="style" media="screen" /><![endif]-->
<link rel="stylesheet" type="text/css" href="css/slide.css" title="style" media="screen" />
<link rel="stylesheet" type="text/css" href="css/smoothDivScroll.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.youtubeplaylist.js"></script>
<script src="js/jquery.ui.widget.js" type="text/javascript"></script>
<script src="js/jquery.smoothDivScroll-1.1-min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/jquery.pngFix.js"></script>
<script type="text/javascript">
$(function() {
    $("ul.demo1").ytplaylist();
    $("ul.demo2").ytplaylist({addThumbs:true, autoPlay: false, holderId: 'ytvideo2'});
    });
$(function() {
    $("div#makeMeScrollable").smoothDivScroll({ autoScroll: "onStart", autoScrollDirection: "backandforth", autoScrollStep: 1, autoScrollInterval: 40, startAtElementId: "startAtMe", visibleHotSpots: "always"});
});

$(document).ready(function(){ 
     $(document).pngFix(); 
}); 
</script>
</head>
<body>
<div id="header">
    <div id="top-menu">
        <div id="left-logo">
        <a href="#"><img src="img/logo-left.png" alt="BhatkalNews" /></a>
        </div>
        <div id="navigation">
        <ul>
        <li class="contact"><a href="#"><img src="img/contact.png" alt="contact"...

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;
}
body {
    background: #36240A url('../img/bg-pattern.gif') repeat;
}
/*container*/
div#container {
    width: 1040px;
    margin: 0 auto!important;
}
div#content-in {
    margin-left:50px;
}
#header {
    height: 111px;
    background: url('../img/header-bg.jpg') repeat-x;
    width: 100%;
}
/*top-menu*/
#top-menu {
    margin:0 auto!important;
    width: 940px;
    height:109px;
}
/*top-logo*/
#left-logo {
    float:left;
    width:300px;
    padding: 30px 5px 20px 0;
}
#left-logo img {
    width:295px;
    height:50px;
}
#right-logo {
    background: url('../img/header-div.jpg') repeat-y;
    float:left;
    width:195px;
    height:94px;
    padding-top: 15px;
    padding-left:5px;
}
#right-logo img {
    width:195px;
    height:85px;
}
/*navigation*/
div#navigation {
    width:432px;
    height:109px;
    float:left;
}
#navigation li {
    background: url('../img/header-div.jpg') repeat-y;
    float:left;
    width:144px;
    height:109px;
}
#navigation li.contact {
    padding:40px 0 0 35px;
    width:109px;
    height:69px;
}
#navigation li.contact img{
    width:80px;
    height:35px;
}
#navigation li.photo {
    padding:40px 0 0 45px;
    width:99px;
    height:69px;
}
#navigation li.photo img{
    width:55px;
    height:35px;
}
#navigation li.video {
    padding:37px 0 0 40px;
    width:104px;
    height:72px;        
    
}
#navigation li.video img{
    width:70px;
   ...