JSFiddle - React, Tailwind, and code Playground

by mariomc

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/css3pie/1.0beta5/PIE.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.5.3/modernizr.min.js"></script>
<div class="zone-wrapper zone-menu-wrapper clearfix" id="zone-menu-wrapper">    
  <div class="zone zone-menu clearfix container-24" id="zone-menu">
    <div id="region-menu" class="grid-24 region region-menu">
  <div class="region-inner region-menu-inner">
      <div class="branding-data">
            <div class="logo-img">
        <a class="active" title="Contact" rel="home" href="/"><img id="logo" alt="Contact" src="http://contact-act.eu/sites/default/files/contact_2.png"></a>      </div>
                        <hgroup class="site-name-slogan">        
                                
        <h1 class="site-name element-invisible"><a class="active" title="Home" href="/">Contact</a></h1>
                              </hgroup>
          </div>
            <nav class="navigation">
      <ul class="menu"><li class="first leaf"><a title="" href="/page/empresa">Empresa</a></li>
<li class="expanded"><a href="/page/solucoes">Soluções</a><ul class="menu"><li class="first leaf"><a href="/SalesAcquisition">Customer Sales Acquisition</a></li>
<li class="leaf"><a title="" href="/CustomerCare">Customer Care</a></li>
<li class="leaf"><a href="/CustomerAccountReceivables">Customer Account Receivables</a></li>
<li class="leaf"><a href="/CustomerKnowladge">Customer Knowledge</a></li>
<li class="leaf"><a title="" href="/page/contact-technology">Technology</a></li>
<li class="last expanded"><a href="/TrainingCenter">Training</a><ul class="menu"><li class="first leaf"><a href="/ContactTrainingCenterCursos">Cursos</a></li>
<li class="leaf"><a href="/ContactTrainingCenterWorkShops">Workshops</a></li>
<li class="last leaf"><a href="/ContactTrainingCenterTestemunhos">Testemunhos</a></li>
</ul></li>
</ul></li>
<li class="leaf"><a href="/page/contact-technology">Tecnologia</a></li>
<li class="leaf"><a...

CSS

.zone-wrapper {
    font-size: 13px;
    font-family: 'Trebuchet MS',Helvetica,sans-serif;
}
html{
    overflow: hidden;
    min-height: 1200px;
    height: auto !important;
    height: 1200px;
}
body{
    overflow: visible;
       min-height: 1200px;
    height: auto !important;
    height: 1200px;
    
}
#logo {
    padding: 22px;
    width: 181px;
}
html, body, div {
    border: 0 none;
    font: inherit;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
.element-invisible {
    clip: rect(1px 1px 1px 1px); /* IE... */
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
}
.ie7 .element-invisible{
display: none;
}
a, a:link {
    text-decoration: none;
}
a, a:link, a:visited, a:active {
    color: #489EC8;
}

.logo-img {
    float: left;
    margin-right: 20px;
}
.site-name-slogan {
    float: left;
}
.site-name {
    margin-top: 20px;
}
.site-name a {
    text-decoration: none;
}
.site-name, .site-slogan {
    line-height: 1em;
    margin-bottom: 0;
}
.site-slogan {
    font-weight: normal;
}
/* Menu */
#zone-menu-wrapper {
    width: 980px;
    margin: 0 auto;
    z-index: 10;
}
#region-menu .region-inner {
    margin: 0 -20px 0 -20px;
    width: 980px;
    height: 70px;
    border-radius: 13px;
    background: rgb(127,186,0); /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: -moz-linear-gradient(top,  rgb(127,186,0) 0%, rgb(127,173,0) 50%, rgb(127,186,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(127,186,0)), color-stop(50%,rgb(127,173,0)), color-stop(100%,rgb(127,186,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgb(127,186,0) 0%,rgb(127,173,0) 50%,rgb(127,186,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgb(127,186,0)...

JavaScript

$(function() {
    if (window.PIE) {
        $('.zone-wrapper, .region-inner, #region-menu li ul').each(function() {
            PIE.attach(this);
        });
    }
});