JSFiddle - React, Tailwind, and code Playground

by Jerome

HTML

<div id="header_container">
  <div id="header">
    <div class="row">
      <div class="small-8 large-8 columns head-major">Dott. </div>
      <div class="small-4 large-4 columns head-minor text-center">La tua bellezza è unica...<br />mettila in buone mani</div>
    </div>
    <div class="row head-sub">
      <div class="small-12 large-12 columns text-center">Specialista in Chirurgia </div>
    </div>
  </div>
      <div class="row">
  <nav class="top-bar">
    <section class="top-bar-section">
    <!-- Left Nav Section -->
      <ul class="left">
        <li class="divider"></li>
        <li><a href="#">Chi siamo</a></li>
        <li class="divider"></li>
        <li><a href="#">Dove siamo</a></li>
        <li class="divider"></li>
        <li class="has-dropdown"><a href="/#">Gallery</a>
          <ul class="dropdown">
            <li><a href="/galleria_categoris/1">liposuzione</a></li>
          </ul>
        </li>
        <li class="divider"></li>
        <li class="has-dropdown"><a href="#">Chirurgia</a>
          <ul class="dropdown">
          </ul>
        </li>
        <li class="divider"></li>
        <li><a href="/messages/new">Contatti</a></li>
        <li class="divider"></li>
      </ul>
      <ul class="right">
        <li><a href="#">Italiano</a></li>  &nbsp; 
        <li><a href="/galleriafotos/4?locale=en">English</a></li> &nbsp; 
      </ul>
    </section>
  </nav>
</div>

<nav class="tab-bar show-for-small">
  <a class="left-off-canvas-toggle menu-icon">
    <span>Menu</span>
  </a>
</nav>

</div>
    
<div id="container">
  <div class="row">
    <div class="small-12 large-12 columns">
      
<p id="notice"></p>

<div class="row">
  <div class="small-2 large-4 columns">
    Test:<br />
    <b>post</b><br />
    Test:<br />
    <b>testo lungo testo lungo testo lungo testo lungo testo lungo testo lungo testo lungo testo lungo </b>
  </div>
  <div class="small-2 large-4 columns">
    Categoria:<br />
    <b>liposuzione</b>
  </div>
  <div...

CSS

.highlight {  background: goldenrod; }
.table-padding {
  padding-top: 2px;
  padding-left: 2px;
  padding-right: 1px;
}
/*  Header  */
#header_container { 
  background: url(/images/imgtop.png) no-repeat;
  border: 0px solid #666; 
  height: 192px; 
  left: 0px; 
  position: fixed; 
  width: 100%; 
  top: 0px; 
  z-index: 301;
  color: #fff:
}
#header{ 
  line-height: 30px; 
  margin:0 auto; 
}
/* content. Header and footer should not overlap the content.*/
#container { 
  margin: 0 auto; 
  position: absolute;
  top: 135px;
  padding-left: 142px; 
  z-index: 300;
}
#content{
}
/*  Footer */
#footer_container { 
  background: #f68f1a;
  border: 1px solid #666;
  bottom: 0px; 
  height: 40px; 
  left: 0px; 
  position: fixed; 
  width: 100%; 
  z-index: 200;
}
#footer { 
  margin: 0 auto; 
  width: 100%; 
  text-align: center;
}
.head-major {
  color: #fff;
  font-size:2.25rem;
  padding-top: 14px; 
}
.head-minor {
  color: #fff;
  font-size:1.3125rem;
}
.head-sub {
  color: #fff;
  font-size:0.9125rem;
  background-color: #d6d3e8;
}
.foot-sub {
  color: #fff;
  font-size:0.9125rem;
  padding-top: 12px;
}
@import url("//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700");
meta.foundation-mq-small{font-family:"/only screen and (max-width: 40em)/";width:0em}
meta.foundation-mq-medium{font-family:"/only screen and (min-width:40.063em) and (max-width:64em)/";width:40.063em}
meta.foundation-mq-large{font-family:"/only screen and (min-width:64.063em)/";width:64.063em}
meta.foundation-mq-xlarge{font-family:"/only screen and (min-width:90.063em)/";width:90.063em}
meta.foundation-mq-xxlarge{font-family:"/only screen and (min-width:120.063em)/";width:120.063em}
*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
html,body{font-size:100%}
body{background: url('bgTab2.gif');color:#003494;padding:0;margin:0;font-family:"Lucida...

JavaScript

$(document).foundation();