JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<header class="" id="navigation">
			<div class="container">
				<div class="headerTopRightMenu">
					<div class="headerTopRightMenuLink logIn">
						<div class="text"><a class="actionLogout" href="javascript:;">Log Out</a></div>
						<div class="icon"></div>
						<div class="clear"></div>
					</div>
					<div class="separator"></div>
					<div class="headerTopRightMenuLink contact">
						<div class="text"><a href="/contact-us">Contact</a></div>
						<div class="clear"></div>
					</div>
					<div class="separator"></div>
					<div class="headerTopRightMenuLink help">
						<div class="text"><a href="http://help.topcoder.com">Help Center</a></div>
						<div class="clear"></div>
					</div>
					<div class="separator beforeSearch"></div>
					<div class="headerTopRightMenuLink search last">
						<div class="icon"></div>
						<div class="text"><a href="/search">Search</a></div>
						<div class="clear"></div>
					</div>
					<div class="clear"></div>
				</div>
				<div class="clear"></div>
				<h1 class="logo">
					<a title="topcoder" href="http://www.topcoder.com"></a>
				</h1>
				<nav class="mainNav" id="mainNav">
				
				
					<ul class="root">
						<li id="nav-menu-item-13018"><a class="13018" href="http://www.topcoder.com/challenges/"><i></i>Challenges</a>
<ul class="child" style="display: none; height: 165px; padding-top: 0px; margin-top: 0px; padding-bottom: 0px; margin-bottom: 0px;">
	<li id="nav-menu-item-13510"><a class="all" href="/challenges"><i></i>All</a></li>
	<li id="nav-menu-item-13511"><a class="design" href="/active-challenges/design/"><i></i>Design</a></li>
	<li id="nav-menu-item-13512"><a class="develop" href="/active-challenges/develop/"><i></i>Development</a></li>
	<li id="nav-menu-item-13513"><a class="data" href="/active-challenges/data/"><i></i>Data Science</a></li>
	<li id="nav-menu-item-13529"><a class="topcoder-arena" href="http://community.topcoder.com/contest/arena/ContestAppletProd.jnlp"><i></i>topcoder...

CSS

body {
    color: #333333;
    font-family: "Source Sans Pro",Arial,Helvetica,sans-serif;
    font-size: 15px;
    font-weight: normal;
    line-height: 1.2em;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
ul {
    list-style: none outside none;
}
a {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
}
a, a:active, a:visited {
    color: #FF8A00;
    outline: medium none;
    text-decoration: none;
    transition-duration: 0.3s;
}
a[href$="javascript:;"] {
}
a:hover {
    color: #FFB800;
}
[title] {
}
.linkAlt {
    color: #3399CC;
}
.linkAlt:hover {
    color: #2FBAFF;
}
header h1, .sideStream h1 {
    color: #333333;
    font-size: 30px;
}
h2 {
    color: #333333;
    font-size: 36px;
    font-weight: normal;
}
h2 em {
    color: #F72125;
}
h3 {
    font-size: 20px;
}
h4 {
    color: #D8D8D8;
    font-size: 18px;
}
em {
    font-style: normal;
}
.grid {
    display: block;
}
.grid-float {
    overflow: hidden;
}
.grid .grid-2-1 {
    width: 50%;
}
.grid .grid-3-1 {
    display: inline-block;
    margin: 0 12px;
    width: 320px;
}
.grid-float .grid-3-1, .grid-float .grid-2-1 {
    float: left;
}
.grid-3-3 {
    position: relative;
}
.grid-3-3 .grid-2-3 {
    float: left;
    width: 665px;
}
.grid-3-3 .grid-1-3 {
    float: right;
    width: 320px;
}
.group:after {
    clear: both;
    content: " ";
    display: block;
    height: 0;
    overflow: hidden;
}
input.isBlured {
    color: #AAAAAA;
}
.hide {
    display: none;
}
.clear {
    clear: both;
}
.container {
    margin: 0 auto;
    position: relative;
    width: 1010px;
}
.container.fluid {
    width: auto;
}
.stop-scrolling {
    height: 100%;
    overflow: hidden;
}
.loading, .errorLoading {
    background: url("../i/loading.gif") no-repeat scroll 10px 50% #FF8A00;
    color: #FFFFFF;
    font-size: 16px;
    height: 36px;
    left: 50%;
    line-height: 34px;
    margin-left: -65px;
    padding: 5px 10px 5px 50px;
    position:...