JSFiddle - React, Tailwind, and code Playground

by dannedolk

HTML

<header class="content-header clear" role="banner"><a class="logo wap8-icon" href="http://www.erikford.me"><i aria-hidden="true" data-icon="E"></i><span>
      Erik Ford
    </span></a>



<nav class="main-nav"><ul id="menu-main-menu" class="main-nav-anchors"><li id="menu-item-261" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-261"><a href="http://www.erikford.me/about/">About</a></li><li id="menu-item-676" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-676"><a href="http://www.erikford.me/blog/">Blog</a></li><li id="menu-item-666" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-666"><a href="#scroll-search">Search</a></li><li id="menu-item-750" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-750"><a href="http://feeds.feedburner.com/notdivisible">Feed</a></li></ul></nav>

</header>

CSS

body,html,div,blockquote,img,label,p,a,h1,h2,h3,h4,h5,h6,pre,ul,ol,li,dl,dt,dd,form,fieldset,input,th,td,figure{
	border:0;
	margin:0;
	padding:0
}

h1,h2,h3,h4,h5,h6{
	font-size:100%
}

img{
	display:block;
	height:auto;
	max-width:100%;
	width:auto
}

video{
	height:auto;
	max-width:100%
}

a,:focus{
	outline:0
}

table{
	border-collapse:separate;
	border-spacing:0
}

caption,th,td{
	font-weight:normal;
	text-align:left
}

blockquote:before,blockquote:after,q:before,q:after{
	content:""
}

blockquote,q{
	quotes:"" ""
}

::-moz-selection{
	background:#ff0
}

::selection{
	background:#ff0
}

html{
	background-color:#f8f8f8
}

body{
	background-color:#fff
}

.center-column,.left-column{
	max-width:36.25em;
	padding:2.188em 0.875em 1em;
	position:relative
}

.center-column{
	margin:0 auto
}

.blog .center-column, .archive .center-column, .search .center-column{
	border-bottom:1px solid #ddd
}

.search .center-column.search-success{
	border-bottom-width:0.563em
}

.search.search-no-results .center-column{
	border-bottom:none
}

a{
	border-bottom:1px dotted;
	font-weight:700;
	text-decoration:none;
	-moz-transition:all 0.25s ease-in-out 0s;
	-ms-transition:all 0.25s ease-in-out 0s;
	-o-transition:all 0.25s ease-in-out 0s;
	-webkit-transition:all 0.25s ease-in-out 0s;
	transition:all 0.25s ease-in-out 0s
}

a,a:visited{
	border-bottom-color:#222;
	color:#222
}

a:hover,a:active{
	border-bottom-color:#aeaeae;
	color:#aeaeae
}

.clear:after{
	clear:both;
	content:"";
	display:block;
	height:0;
	visibility:hidden
}

@font-face{
	font-family:'WAP8-Icons';
	src:url('http://www.erikford.me/wp-content/themes/trabajo/fonts/icons/WAP8-Icons.eot');
	src:url('http://www.erikford.me/wp-content/themes/trabajo/fonts/icons/WAP8-Icons.eot?#iefix') format('embedded-opentype'), url('http://www.erikford.me/wp-content/themes/trabajo/fonts/icons/WAP8-Icons.svg#WAP8-Icons') format('svg'), url('http://www.erikford.me/wp-content/themes/trabajo/fonts/icons/WAP8-Icons.woff') format('woff'),...