JSFiddle - React, Tailwind, and code Playground

by rohitazad

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html itemscope itemtype="http://schema.org/Blog" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
<head>
<title>Welcome to TutorialHelp!</title>
<link href="css/tutorialHelp.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="divHeaderContainer">
<div id="divHeader">
<div id="divLogo"></div>
<div id="divNavigtation">
<div id="divNavMenu">
<ul>
<li> <a href="index.html">Home</a></li>
<li> <a href="Tutorials/index.html">Tutorials</a>
<ul>
<li><a href="Photoshop/index.html">Photoshop</a>
<li><a href="Dreamweaver/index.html">Dreamweaver</a>
<li><a href="Illustrator/index.html">Illustrator</a>
<li><a href="Flash/index.html">Flash</a>
<li><a href="InDesign/index.html">InDesign</a>
</ul>
</li>
<li><a href="Articles/index.html">Articles</a></li>
<li><a href="About/index.html">About</a></li>
<li><a href="Contact/index.html">Contact</a></li>
</ul> <!-- end main UL -->
<br class="clearFloat" />
</div>
<div id="divSocial"></div>
</div>
</div>
</div>
<div id="divContentContainer">
<div id="divWrapper">
<div id="divInnerWrapper">
<div id="divContent">
<div id="divBanner"></div>
<div id="divListing">
<header class="listing">
<div id="divListingLeft">
<a href="#" title="The Basics Of Photoshop">
<img width="200px" height="200px" src="images/photoshopBasicsImage.jpg" alt="PhotoshopBasicsImage" title="PhotoshopBasicsImage" />
</a>
<span class="metaWrapper">Photoshop</span>
<span class="metaWrapper">Beginner</span>
</div>
<div id="divListingRight">
<p class="tags">
<a href="#" title="Link to the Tutorials...

CSS

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

body{
    margin:0px;
    padding:0px;
    font-family:Verdana, Geneva, sans-serif;
    font-size:12px;
    color:#000;
    min-width:1300px;
    background-color:#83ACBC;
}

#divHeaderContainer{
    width:100%;
    height:200px;
    background-color:#CEDBD9;
    margin:0px auto;
}

#divHeader{
    width:1120px;
    height:200px;
    min-width:1120px;
    margin:0px auto;
    background-image: url(../images/backgroundImage_r1_c1_r1_c1.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
}

#divLogo{
    height:130px;

}

#divNavigation{
    height:32px;
    position:relative;
    background-color:#333;
    width:1120px;
}

#divNavMenu {
    width:auto;
    height:32px;
    margin-top: 7px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
}

#divNavMenu ul {
    margin:0;
    padding:0;
    line-height:30px;
}

#divNavMenu li {
    margin:0;
    padding:0;
    list-style:none;
    float:left;
    position:relative;
    background:#DCE4E3;
}

#divNavMenu ul li a {
    text-align:center;
    height:30px;
    width:148px;
    display:block;
    color:#000;
    font-family:Verdana, Geneva, sans-serif;
    text-decoration:none;
    border:1px solid #C5D1D0;
    font-size: 16px;
    font-weight: bold;
}

#divNavMenu ul ul {
    position:absolute;
    visibility:hidden;
    top:32px;
}

#divNavMenu ul li:hover ul {
    visibility:visible;
    z-index:9999;
}

#divNavMenu li:hover {
   background:#83ACBC;
}

#divNavMenu ul li:hover ul li a:hover {
    color:#FFF;
    background:#9EBECB;
}

#divNavMenu a:hover {   
    color:#FFF;
}

/* Contains the Float */

.clearFloat {
    clear:both;
    margin:0;
    padding:0;
    height:0px;
    overflow:hidden;
}

/* IE7 Display Fix */  

#divNavMenu ul li {

    display: inline;     

}   

#divContentContainer{
    margin:0px auto;
    padding-bottom:50px;
    width:100%;
    background-image: url(../images/backgroundImage_r1_c1_r3_c1.jpg);
   ...