JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper" style="height: 398px;">
<div class="snow">&nbsp;</div><div class="logo">&nbsp;</div><div class="flake1">&nbsp;</div><div class="flake2">&nbsp;</div>
<div id="menu">
<nav>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="shows.php">Show Schedule</a></li>
<li><a href="snowmen.php" id="snowmen">Snowmen</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav></div>
<div id="main" style="display: block;"><div id="content">

<h1>Snowmen List</h1>
            <div id="tabs">

                <ul>
<li><a href="#tabs-1" onclick="document.getElementById(" myshit").innerhtml="xmlhttp.responseText;document.write('Pancakes')&quot;">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>

<div id="myshit">

</div>
                
 <div id="tabs-1">               
<p>
All snowmen have a charm or other special decoration &amp; are $6.95 each, or 3 for $19.95.  Shipping is $2.00 for one snowman; for two or more we’ll try to keep it to a minimum.  Priority Mail (on request) will be charged as per USPS rates.   Postage just keeps going up, along with packing materials, but we keep it as low as we can. </p>

<p>We can do custom signs!!   Special sign requests can be accommodated (although a specific charm may not be available for it), but extra time may be required to complete &amp; ship the order. The snowmen listed here are our main inventory that we bring to shows (this can vary a bit from place to place).  If you don’t see something you are searching for, drop us a line…we have probably made it at one time or another, or can make one for you!</p>

<p>
We also do “name” snowmen that have a sign with a person’s name and its meaning; these are not listed on the site, but are available in red, pink, purple, blue, or green, and are also $6.95.</p>
</div>

<div id="tabs-2">
adfadsfasda
</div>


</div>

</div></div>
<div class="footer">
© Copyright 2013 Homespun Traditions. All rights...

CSS

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

html {
	margin: 0px;
	padding: 0px;
	background: url('../images/background.png') bottom repeat-x #6e97cd;
	height:100%;
}

body {
	margin:0px;
	padding:0px;
}

.snow {
	width:960px;
	height:86px;
	background: url(../images/snow.png);
	position:absolute;
	bottom:0px;
	left:0px;
	text-indent:-99999em;
}

.logo {
	width:257px;
	height:40px;
	background:url('../images/logo.png');
	position:absolute;
	top:20px;
	left:10px;
	text-indent:-99999em;
}
#menu {position:absolute;top:20px;right:0px;height:37px;background:url(../images/menu.png) repeat-x;}
#menu ul{margin:0px;padding:0px;position:relative;margin-right:50%;height:37px;}
#menu ul li {float:left;list-style:none;padding-left:35px;padding-right:5px;height:37px;}
#menu ul li a {text-decoration:none;  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.50) !important;}
#menu ul li a:hover {  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.75)!important;}

.footer {color:#375a89; width:430px;position:absolute;bottom:10px;right:10px;font-family:Arial, Helvetica, sans-serif;text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);text-alight:right;}

h1 {
  font-family: "bebas-neue",sans-serif;
  color:#FFFFFF;
  font-size:42px;
  letter-spacing: 3px;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  }
  
h2, .feature a, #menu ul li a {
  font-family: "bebas-neue",sans-serif;
  color:#FFFFFF;
  font-size:25px;
  letter-spacing: 3px;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  }
    
	#content, #snowmen {
		width:800px;
		margin:0px auto;
		padding:0px;
		margin-top: 200px;
	}
#content h1 {margin-bottom:5px;}	
#content h2 {margin-top:0px;}
#content p {
	font-family: "omnes-pro",sans-serif;
  	color:#FFFFFF;
  	font-size:17px;
  	text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
}
	.flake1 {background:url(../images/flake1.png) no-repeat;width:43px;height:41px;text-indent:-99999em;position:absolute;top:53px;left:248px;}
	.flake2 {background:url(../images/flake2.png)...

JavaScript

(function(a){a.fn.tabsLite=function(){this.each(function(){var b=a(this);var c=b.children("ul").children("li");var d=b.children("div");var e=d.first();b.addClass("tabsLite-mainDiv");c.addClass("tabsLite-tab").first().addClass("tabsLite-tab-selected");d.addClass("tabsLite-panel").hide().first().show().addClass("tabsLite-panel-selected");c.click(function(){e=a(this).children("a").attr("href");c.removeClass("tabsLite-tab-selected");d.hide().removeClass("tabsLite-panel-selected");a(this).addClass("tabsLite-tab-selected");a(e).show().addClass("tabsLite-panel-selected")}).children("a").click(function(a){a.preventDefault()})});return this}})(jQuery)
    
$(function(){
  $('#tabs').tabsLite();
});