JSFiddle - React, Tailwind, and code Playground
by Gabriele Petrioli
HTML
<link rel="stylesheet" href="http://www.manageourwebsite.com.au/StyleSheets/ModuleStyleSheets.css">
<link rel="stylesheet" href="http://www.manageourwebsite.com.au/css/mowstyle.css">
<style type="text/css">
#holiday-overlay{
position:fixed;
top:0; left:0; right:0; bottom:0;
background: rgba(255,255,255,0.7);
z-index:9999;
}
#holiday-message{
width:400px;
padding:30px;
background-color: black;
left:50%;
top:40%;
margin-left:-200px; /*half of width*/
border-radius:5px;
color:white;
position:relative;
}
#holiday-close{
paddding:5px;
position:absolute;
right:10px;
top:10px;
cursor:pointer;
font-weight:bold;
color:white;
}
</style>
<div id="holiday-overlay">
<div id="holiday-message">
<a onclick="var el = document.getElementById('holiday-overlay'); el.parentNode.removeChild(el)" id="holiday-close">×</a>
Our Retail shop front will be closed from Friday 21st December 2012 thru to Monday 21st January 2013.<br/>
The Online store will be open 24/7 as usual with all online orders being processed as normal.
</div>
</div>
<div id="header">
<div id="logo"><br />
<br />
<br />
</div>
<!-- end #logo -->
<div id="menu">
<ul>
<li class="first"><a href="#">Home</a> </li>
<li><a href="/moweb/contact">Contact</a> </li>
<li><a href="/moweb/about">About</a> </li>
<li><a href="/moweb/links">Links</a> </li>
</ul>
</div>
<!-- end #menu --></div>
<!-- end #header -->
<div id="page">
<div id="content">
<div class="post">
<h1><a href="/mowhome"><img alt="" src="/css/images/logoheader.gif"...