JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<div class='top_banner'>
  <div class='top_banner1'>{$top1}</div>
  <div class='top_banner2'>{$top2}</div>
  <div class='top_navbar'>
<div class='navbutton'><a href='../../index'>Home</a></div>
<div class='navbutton'><a href='../../flock'>My Flock</a></div>
<div class='navbutton'><a href='../../stats'>Competition</a></div>
<div class='navbutton'><a href='../../explore'>Explore</a></div>
<div class='navbutton'><a href='../../island'>My Island</a></div>
<div class='navbutton'><a href='../../activity'>Business</a></div>
<div class='navbutton'><a href='../../account'>My Office</a></div>
  </div><!-- end top_navbar -->
</div><!-- end top_banner -->

CSS

img, div {box-sizing:border-box;image-rendering: -moz-crisp-edges;image-rendering: -o-crisp-edges;image-rendering: -webkit-optimize-contrast;-ms-interpolation-mode:  nearest-neighbor;image-rendering: pixelated;}
body{font-size:16px;}

.top_banner {width:930px;height:160px;margin:auto;box-sizing:border-box;position:relative;color:#774d31;background-image:url(http://griffusion.elementfx.com/pics/ui/topborder.gif);background-size:100% 100%;}
.top_banner1 {position:absolute;top:15px;left:230px;border:1px dotted blue;width:490px;}
.top_banner2 {position:absolute;top:62px;left:30px;border:1px dotted blue;width:870px;}
.top_bannerbit {display:inline-table;vertical-align:top;text-align:center;}

.top_navbar {position:absolute;top:93px;left:20px;width:890px;text-align:center;clear:auto;max-height:70px;border:1px dotted white;font-size: 18px;}
.navbutton {position:relative;width:115px;height:42px;border:5px solid #fdeea1;margin:0px 2px;padding:5px;border-radius:5px;background-color:#f3d780;display:inline-table;vertical-align:top;transition:0.2s;}
.navbutton:hover {background-color:#fdeea1;border:5px solid #fef8db; transition:0.2s;cursor:pointer;}
.navbutton a:hover {color:#d0983d;transition:0.2s;}


.topstatbar {display:inline-table;vertical-align:top;height:25px;line-height:25px;border:0px solid grey;text-align:center;}
.myhpbar, .mympbar {width:110px;height:20px;background-color:white;border:1px solid grey;border-radius:5px;text-align:left;padding:1px;float:right;margin-right:5px;}
#myhpinner {background-color:red;height:100%;border-radius:5px;}
#mympinner {background-color:blue;height:100%;border-radius:5px;}