JSFiddle - React, Tailwind, and code Playground

by johnmu

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>johnmu.com  johnmu.com - John Mueller’s technical website tips and tricks</title>

<meta name="description" content="John Mueller's technical website tips and tricks" />
</head>

<body>
<div id="page">

<div id="header">
<div><div>	
	<div class="header-title">
		 <h1>  
		<a href="http://johnmu.com" title="johnmu.com: John Mueller&#8217;s technical website tips and tricks">johnmu.com</a>
		 </h1>		<p>John Mueller&#8217;s technical website tips and tricks</p>
	</div> 
	<div class="search">
		<form method="get" id="searchform" action="http://johnmu.com/">
<input type="text" size="12" name="s" id="s" value="search..."  onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';"/>
</form>
    <script type="text/javascript"><!--
    showReadabilityMenu('Resize text:');
    //--></script>
	</div> 
</div></div>	
</div>

<div id="wrapper">

	<div id="content">
			
						
			<div class="post" id="post-155">
				<div class="post-title"><div>
					<h2><a href="http://johnmu.com/pagerank-hacker-using-suomi-co-in/" rel="bookmark" title="Permanent Link to Hackers stealing your PageRank">Hackers stealing your PageRank</a></h2>
				</div></div>
        <div class="post-sub">
          Posted on
          7 December 2008 at 23:44 UTC,
          filed under <a href="http://johnmu.com/category/hack/" rel="category tag">Hack</a>,
          <a href="http://johnmu.com/pagerank-hacker-using-suomi-co-in/#comments" title="Comment on Hackers stealing your PageRank">46 comments</a>.         </div>
        <div class="post-entry">
					<p>The last time I <a href="http://johnmu.com/hack-hidden-redirect/">wrote about a hacked site</a>, it was...

CSS

/*
Theme Name: JohnMu
Theme URI: http://johnmu.com/
Description: A simple fluid width theme with two column layout. Right hand sidebar, widgets supported. 
Version: 0.0.1
Author: Johannes Mueller
Author URI: http://johnmu.com/
*/

body {
	background:#fff;
	color:#000;
	font-size: 1.0em;
	font-family: lucida,helvetica,sans-serif;
	margin:5px;
	text-align:center;
}
body * 
{
	font-size: 100%;
}

a {
	color:#33f;
	text-decoration:underline;
}
a:hover {
	color:#f33; 
}

ul {
	list-style:square;
}

h1, h2, h3, h4, h5, h6 {
}

blockquote {
	color:#222;
	font-size:0.9em;
	padding:0.2em 2em;
	border-left: solid 1px #bba;
	border-top: solid 1px #bba;
	background-color: #f9f9f8; 
    font-style: italic;
/*	background: url(images/corner2.gif) no-repeat top left; */
}
blockquote blockquote {
	margin:0;
	font-size:1em;
}

input, textarea{
	background:transparent;
	border:1px solid #aaa;
}
input:focus, textarea:focus {
	background:#eef;
}

img {
	margin:0.2em;
	border:0;
}

img.wp-smiley {	
	margin:0;
}

/* Layout */
#page {
	min-width:760px;
	margin:0 auto;
	text-align:left;
}
#wrapper {
	clear:both;
	margin:1em 5%;
}
#content {
	width:75%; 
	float:left;
	padding-right: 10px;
	border-right: solid 1px #33f;
}

/*#content a[rel~=nofollow] 
{
	border-bottom: dashed 2px #ffa500;
	background:url('images/nofollow.gif') no-repeat center left;
	padding-left: 17px;
	padding-right: 2px;
}*/

#sidebar {
	width:22%;
	float:right;
}
#footer { 
	clear:both;
	margin:0 5em;
}

/* Header */
#header {
	height:96px;
	border-bottom: solid 1px #33f;
}

#header div {
	height:96px;
}

#header div div {
	height:96px;
}

#header div div div {
	height:auto;
	background:none;
}

.header-title {
	float:left;
	position:absolute;
	top:25px;
	left:5%;
	margin:5px;
}

.header-title h1 {
	margin:0;
	font-size:1.8em;
}
.header-title h1 a {
	background:transparent; 
	color:#000;
    text-decoration: none;
}
.header-title h1 a:hover {
	background:transparent;
	color:#00f;
	text-decoration:...