JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header_container">
  <div id="content">
      <nav class="top-bar hide-for-small">
    <section class="top-bar-section">
    <div class="right">
        CN &nbsp; 
        <a href="/?locale=en">EN</a> &nbsp; 
    </div>

  </section>
</nav>

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

  </div>
</div>

<div id="container">
  <div class="skyline">
      main


  </div>
</div>

<div id="footer_container">
</div>

CSS

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the top of the
 * compiled file, but it's generally better to create a new file per style scope.
 *
 *= require_self
 *= require_tree .
 */
.highlight {  background: goldenrod; }
.table-padding {
  padding-top: 2px;
  padding-left: 2px;
  padding-right: 1px;
}
/*  Header  */
#header_container { 
  background: url(http://acharm.iwant2go2.com/images/imgtop.png) no-repeat;
  border: 0px solid #666; 
  height: 192px; 
  left: 0px; 
  position: fixed; 
  width: 100%; 
  top: 0px; 
  z-index: 301;
}
#header{ 
  line-height: 30px; 
  margin:0 auto; 
}
/* content. Header and footer should not overlap the content.*/
#container { 
  margin: 0 auto; 
  position: absolute;
  padding-top: 50px;
  padding-left: 142px; 
  z-index: 300;
  width: 100%;
}
#content{
}
/*  Footer */
#footer_container { 
  background: url(http://acharm.iwant2go2.com/images/imgbottom.png) no-repeat;
  border: 0px; 
  height: 223px; 
  bottom: 0px; 
  right: 0px; 
  position: fixed; 
  width: 100%; 
  z-index: 200;
}
#footer { 
   background-image: url(http://acharm.iwant2go2.com/images/imgbottom.png) no-repeat;
   height: 120 px;
   position: fixed;
   right: 0;
   bottom: 0;
   z-index: 20;
}

.bgbottom {
   background-image: url(http://acharm.iwant2go2.com/images/imgbottom.png) no-repeat;
   width: 346 px;
   height: 212 px;
}

#mynav, #mynav ul{
margin:0;
padding:0;
list-style-type:none;
list-style-position:outside;
position:relative;
line-height:1.5em; 
}

#mynav a{
display:block;
padding:0px 5px;
border:1px solid #333;
color:#fff;
text-decoration:none;
background-color:#333;
}

#mynav...

JavaScript

$(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto({
      animation_speed:'normal',
      theme:'dark_rounded',  /* light_rounded / light_square / dark_rounded / light_square / dark_square / facebook */
      slideshow: 2800,
      autoplay_slideshow: false,
      opacity: 0.80, /* Value between 0 and 1 */
      show_title: false, /* true/false */
      allow_resize: true, /* Resize the photos bigger than viewport. true/false */
      default_width: 500,
      default_height: 404,
      counter_separator_label: '/', /* The separator for the gallery counter 1 "of" 2 */
      horizontal_padding: 20, /* The padding on each side of the picture */
      hideflash: false, /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */
      wmode: 'opaque', /* Set the flash wmode attribute */
      autoplay: true, /* Automatically start videos: True/False */
      modal: false, /* If set to true, only the close button will close the window */
      deeplinking: true, /* Allow prettyPhoto to update the url to enable deeplinking. */
      overlay_gallery: false, /* If set to true, a gallery will overlay the fullscreen image on mouse over */
      keyboard_shortcuts: true, /* Set to false if you open forms inside prettyPhoto */
      changepicturecallback: function(){}, /* Called everytime an item is shown/changed */
      callback: function(){}, /* Called when prettyPhoto is closed */
      ie6_fallback: true,
      image_markup: '<img id="fullResImage" src="{path}" />',
      flash_markup: '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="{width}" height="{height}"><param name="wmode" value="{wmode}" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="{path}" /><embed src="{path}" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="{width}" height="{height}"...