JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>HSRR!</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script language="javascript" src="description.js"></script>
</head>

<body>
<div id="container">
	<div id="header">
		<h1 class="ribbon">HSRR!</h1>
		<h2><script type="text/javascript">description_write()</script></h2>
	</div>	

	<div id="navigation">
		<ul>
			<li><a href="/home.html">Home</a></li>
			<li><a href="/pictures.html">Pictures</a></li>
			<li><a href="/videos.html">Videos</a></li>
			<li><a href="/flashs.html">Flashs</a></li>
			<li><a href="/texts.html">Texts</a></li>
			<li><a href="/htmls.html">HTMLs</a></li>
		</ul>
	</div>
	
	<div id="content">
			<span id="content-header">News:</span>
			<div id="post-container">
				<h1><a href="#">Its back, suckas</a></h1>
				<h2>2/4/13</h2>
				Hey, it is back.
				<div id="post-footer">
					<a href="#">Read More</a>
				</div>
			</div>

		<div id="footer">
			&copy; 2009-2013 HSRR!, All Rights Reserved
		</div>
	</div>	
	
	<div id="sidebar">
	 	<h1>Search</h1>
			<form method="get" action="http://www.google.com/search">
				<div>
					<table border="0" cellpadding="0">
						<tr><td>
							<input type="text" id="searchbar" name="q" size="14" maxlength="255" value="" />
							<input type="submit" id="searchsubmit" value="Search" />
						</td></tr>
						<tr><td>
							<input type="hidden"  name="sitesearch" value="net" checked />
						</td></tr>
					</table>
				</div>
			</form>
		<h1>Links</h1>
			<ul>
				<li><a href="#">G list</a></li>
				<li><a href="#">Website list</a></li>
				<li><a href="http://twitter.com/Eckleson">Eckleson</a></li>
				<li><a href="download.html">Downloads</a></li>
				<li><a href="about.html">About</a></li>				
				<li><a href="contact.html">Contact Us</a></li>
			</ul>
		<h1>Advertisement</h1>
		<a href="#"><img src="banner2.png" /></a>
	</div>

	<div id="footer-clear"></div>
</div>

<div...

CSS

/* Clear */
* {
}
/* /Clear */

/* Containers */
#container {
border-style:solid;
border-width:1px;
width:650px;
margin: 0 auto;
}
/* /Containers */

/* Links */
a:link {
color:#FF0000;
text-decoration: none;
}
a:visited {
color:#FF0000;
text-decoration: none;
}
a:hover {
color:#cc0000;
text-decoration: none;
}
a:active {
color:#cc0000;
text-decoration: none;
}
/* /Links */

/* Bullet Points */
ul, li {
list-style-type: none;
margin:0;
padding:0;

}
/* /Bullet Points */

/* Header */
#header {
height:225px;
text-align:center;
padding: 5 5 5 5;
}

.ribbon{text-align:center; position:relative; color:#fff; margin:0 -30px 30px -30px; padding:10px 0; text-shadow:0 1px rgba(0,0,0,.8); font-size:28px;
font-weight:bold;
color: #ff0000;
text-shadow: 1px 1px #333;
background-color:#5c5c5c;
background-image:-moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image:-webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image:-o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image:-ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image:linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
-moz-box-shadow:0 2px 0 rgba(0,0,0,.3); -webkit-box-shadow:0 2px 0 rgba(0,0,0,.3); box-shadow:0 2px 0 rgba(0,0,0,.3)}
.ribbon:before,.ribbon:after{content:""; position:absolute; border-style:solid; border-color:transparent; bottom:-10px}
.ribbon:before{border-width:0 10px 10px 0; border-right-color:#222; left:0}
.ribbon:after{border-width:0 0 10px 10px; border-left-color:#222; right:0}   
/* Navigation */
#navigation {
}

#navigation ul {
background-color:#ff0000;
border-top-style:solid;
border-top-width: 1px;
border-bottom-style:solid;
border-bottom-width:1px;
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}

#navigation li {
float:left;
}

#navigation a {
color:#ffffff;
padding: 3 25 3 25;
display:block;
background-color:#ff0000;
text-decoration: none;
width:...