JSFiddle - React, Tailwind, and code Playground

by rarteaga

HTML

<link rel="stylesheet" href="http://try.buildwinjs.com/lib/winjs/css/ui-light.css">
<script src="http://try.buildwinjs.com/lib/winjs/js/base.min.js?v1.0.70"></script>
<script src="http://try.buildwinjs.com/lib/winjs/js/ui.min.js?v1.0.70"></script>

<div id="page" class="hfeed site">
<div id="top-section">
  <header id="masthead" class="site-header" role="banner">
    
  </header>
  <!-- #masthead -->
  
  <div id="navWrapper">
    <nav id="site-navigation" class="main-navigation" role="navigation">
      <h1 class="menu-toggle">
        Menu      </h1>
      <a class="skip-link screen-reader-text" href="#content">
      Skip to content      </a>
      <div class="menu"><ul class=" nav-menu"><li><a href="http://mepun.hol.es/">Inicio</a></li><li class="page_item page-item-7"><a href="http://mepun.hol.es/?page_id=7">Contenido</a></li></ul></div>
    </nav>
    <!-- #site-navigation -->
    <div class="clear"></div>
  </div>
  <!-- #site-navigation --> 
  
</div>
<!--#top-section-->

<div id="content" class="site-content container">

	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

			
				
<article id="post-7" class="post-7 page type-page status-publish hentry">
	<!--<header class="entry-header">
		<h1 class="entry-title">Contenido</h1>
	</header>--><!-- .entry-header -->

	<div class="entry-content">
		<p><button class="showButton">Show</button></p>
<div class="customDialog" data-win-control="WinJS.UI.ContentDialog" data-win-options="{<br />
             title: 'Main instruction',<br />
             primaryCommandText: 'Ok',<br />
             secondaryCommandText: 'Cancel'<br />
        }" style="
    display: none;
"><br>
    Use the content area to present additional information helpful to understanding or using the dialog.<br>
    You can use this area to provide more detail or define terminology. Don’t repeat the main instruction<br>
    with slightly different wording.
</div>
			</div><!-- .entry-content...

CSS

/* 
** Main Stylesheet Document of the theme 
** This contains basic Structural Details, Styling of the theme.
*/
/* Basic Containers 
-------------------------------------------------*/
body {
  font-family: 'Open Sans',sans-serif;
}
.container {
  width: 1100px;
  margin: auto;
  font-family: 'Open Sans',sans-serif;
}
#page {
  position: relative;
  z-index: 999;
  margin: auto;
}
#content {
  background: #fff;
  padding: 0;
  word-wrap: break-word;
  -ms-word-wrap: break-word;
}

/* HEADER 
--------------------------------------------------*/
.header-wrapper {
  width: 1100px;
  margin: auto;
  margin-top: 10px;
}
#header-image {
  width: 100%;
  position: fixed;
  min-height: 100%;
}
#header-image img {
  filter: blur(5px);
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
}
#header-image:after {
  content: "";
  background: url(../images/overlay.png) repeat;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 1;
  border-bottom: solid 9px #000000;
}
header {
   /*text-align: center;
  padding: 20px; */
}
.site-branding { float:left; margin-left: 20px; }
#social-icons { float:right; margin-top: 32px; }
header .site-title a {
  text-decoration: none;
  font-size: 48px;
  font-family: 'Gilda Display', serif;
  font-weight: lighter;
  text-shadow: 0px 0px 10px #888;
}
header .site-description {
  font-size: 18px;
  font-weight: lighter;
}
header #social-icons img {
  width: 48px;
  padding-right: 5px;
  transition: all 0.4s ease;
  -webkit-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
}
header #social-icons img:hover {
  transform: rotate(10deg) scale(1.04);
  -webkit-transform: rotate(10deg) scale(1.1);
  -moz-transform: rotate(10deg) scale(1.1);
}

/* Main Navigation 
_______________________________________________*/

.main-navigation .menu-toggle {
  background: #138BCF;
  color: white;
  font: 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:...