JSFiddle - React, Tailwind, and code Playground
HTML
<nav>
This is the top bar/nav
</nav>
<div id='iframe'><iframe src='http://wordpress.org' /></div>
CSS
nav {
position: fixed;
background: red;
top: 0;
width: 100%;
}
body{
margin: 0px;
padding: 0px;
}
html {
height: 100%;
overflow: hidden;
}
body {
font-family: arial,sans-serif;
font-size: 16px;
height: 100%;
margin: 0;
padding: 0;
}
a {
color: #000000;
text-decoration: none;
}
a:hover {
color: #840000;
text-decoration: none;
}
img {
border: 0 none;
}
#toolbar {
background: url("images/wrapper-frame1.png") repeat-x scroll 0 0 transparent;
height: 33px;
overflow: hidden;
}
#logo {
float: left;
height: 33px;
margin: 0 0 0 10px;
width: 300px;
}
#main {
margin-left: 15px;
}
#links {
height: 25px;
}
#close {
background: url("images/close.png") no-repeat scroll 0 0 transparent;
display: none;
height: 21px;
margin: -29px 0 0;
position: absolute;
right: 25px;
width: 16px;
}
.twitter {
background: url("http://3.bp.blogspot.com/_0s-GnnHKfng/TGAXSCqMCSI/AAAAAAAAAZk/aSLIKHABZrY/s1600/icon_twitter.png") no-repeat scroll 0 0 transparent;
display: block;
height: 40px;
margin: 15px 0 0;
overflow: hidden;
position: absolute;
right: 70px;
width: 50px;
}
.twitter:hover {
background: url("http://3.bp.blogspot.com/_0s-GnnHKfng/TGAXSCqMCSI/AAAAAAAAAZk/aSLIKHABZrY/s1600/icon_twitter.png") no-repeat scroll 0 -40px transparent;
}
.rss {
background: url("http://1.bp.blogspot.com/_0s-GnnHKfng/TGAXRs9MxfI/AAAAAAAAAZU/btnYzOUdGCA/s1600/icon_rss.png") no-repeat scroll 0 0 transparent;
display: block;
height: 40px;
margin: 12px 0 0;
overflow: hidden;
position: absolute;
right: 120px;
width: 50px;
}
.rss:hover {
background: url("http://1.bp.blogspot.com/_0s-GnnHKfng/TGAXRs9MxfI/AAAAAAAAAZU/btnYzOUdGCA/s1600/icon_rss.png") no-repeat scroll 0 -40px transparent;
}
#extra {
height: 100px;
margin: 35px 0 0;
}
#iframe {
overflow: hidden;
}
#iframe, iframe {
border: medium none;
height:...